-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
2번 문제에서 넘어가질 않습니다(강의 하단의 trouble shooting까지 확인한 상황)
21.06.07 08:46 작성 조회수 119
0
강사님 강의를 잘 듣고 있던 와중에 문제가 발생하여 다시 글 남깁니다.
템플릿에 적용하기 전에는 2번에서 다음으로 잘 넘어갔는데, 템플릿을 적용한 후로는 2번에서 다음 버튼이 먹질 않습니다.
<input type="radio" name="question-{{ question.number }}" id="choice-{{ choice.pk }}" value="{{ choice.developer.pk }}" /> 부분은 강의 초반에 제대로 적용해서 이 부분에 오류가 나진 않은 것 같습니다.
강의 하단의 trouble shooting 내용을 토대로 진행했을 때, 먼저 저는 데스크톱 크롬 100%인 상태임에도 되지 않고,
$('html, body').animate({scrollTop: (700)}, 500);
$('html, body').animate({scrollTop: (1400)}, 500);
$('html, body').animate({scrollTop: (2100)}, 500);
이렇게 하면 1 -> 2 -> 3번으로 제대로 갑니다.
form.js 코드를 해결방법에 있는 내용으로 변경해도 여전히 2번에서 멈춰있습니다ㅠㅠ
아래는 관련 소스코드입니다.
form.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<title>나의 개발 유형찾기</title>
</head>
<body>
<section id="survey">
<div class="wrapper">
<form id="form" action="/result/" method="post">
{% csrf_token %}
{% for question in questions %}
<div class="test">
<div class="question_container">
<h3 class="number">{{ question.number }}/{{ questions.count }}</h3>
<h3 class="question">{{ question.counter }}</h3>
</div>
<div class="answer">
{% for choice in question.choice_set.all %}
<div>
<input
type="radio"
name="question-{{ question.number }}"
id="choice-{{ choice.pk }}"
value="{{ choice.developer.pk }}"
/>
<label for="choice-{{ choice.pk }}">{{ forloop.counter }}. {{ choice.content }}</label>
</div>
{% endfor %}
</div>
{% if not forloop.first %}
<div class="btn_wrap btn_sort">
{% else %}
<div class="btn_wrap">
{% endif %}
{% if not forloop.first %}
<button class="prev_btn">이전</button>
{% endif %}
{% if not forloop.last %}
<button class="next_btn">다음</button>
{% else %}
<input type="submit" value="제출" class="submit_btn"/>
{% endif %}
</div>
</div>
{% endfor %}
</form>
</div>
</section>
<script type="text/javascript" src="{% static 'js/form.js' %}"></script>
</body>
</html>
form.js
// function scrollUp() {
// const vheight = $('.test').height();
// $('html, body').animate({
// scrollTop: ((Math.ceil($(window).scrollTop() / vheight) - 1) * vheight)
// }, 500);
// };
// function scrollDown() {
// const vheight = $('.test').height();
// $('html, body').animate({
// scrollTop: ((Math.floor($(window).scrollTop() / vheight) + 1) * vheight)
// }, 500);
// };
function scrollUp(top) {
const vheight = $('.test').height();
const margin_top = parseInt($('#survey').css('margin-top'), 10);
$('html, body').animate({
scrollTop: top - vheight - margin_top
}, 500);
};
function scrollDown(top) {
const vheight = $('.test').height();
const margin_top = parseInt($('#survey').css('margin-top'), 10);
$('html, body').animate({
scrollTop: vheight + top - margin_top
}, 500);
}
$(function() {
// $('.next_btn').click(function(e) {
// let divs = $(this).parent().prev().children();
// let inputs = divs.find('input:checked');
// if(inputs.length < 1) {
// alert('문항이 선택되지 않았습니다');
// return false;
// }
// e.preventDefault();
// scrollDown();
// });
// $('.prev_btn').click(function(e) {
// e.preventDefault();
// scrollUp();
// });
$('.next_btn').click(function(e){
let divs = $(this).parent().prev().children();
let present_top = $(this).parent().parent()[0].offsetTop;
let inputs = divs.find('input:checked');
if(inputs.length < 1) {
alert('문항이 선택되지 않았습니다.');
return false;
}
e.preventDefault();
scrollDown(present_top);
});
$('.prev_btn').click(function(e){
let present_top = $(this).parent().parent()[0].offsetTop;
e.preventDefault();
scrollUp(present_top);
});
$('#form').submit(function() {
let radios = $('input[type=radio]:checked');
if(radios.length < 3) {
alert('문항이 선택되지 않았습니다');
return false;
}
return true;
});
$('html, body').animate({
scrollTop: 0
}, 500);
});
답변 기다리고 있겠습니다!
감사합니다.
답변을 작성해보세요.
답변 0