2번 문제에서 넘어가질 않습니다(강의 하단의 trouble shooting까지 확인한 상황)
206
작성한 질문수 18
강사님 강의를 잘 듣고 있던 와중에 문제가 발생하여 다시 글 남깁니다.
템플릿에 적용하기 전에는 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
data.json 파일을 어디 올려놓은 건가요??
0
151
1
python manage.py dumpdata main --output data.json로 생성된 파일의 글자가 깨짐 문제
0
158
1
현재는 구름 ide 컨테이너 생성이 유료인가요? 시간당 크레딧이 필요합니다.
0
258
1
사이트 접속이 안돼요
0
242
1
첫화면 버튼이 css 적용이 안됩니다..
0
503
1
제출버튼 클릭하면 오류 발생
0
240
1
makemygrations 오류
0
249
1
자바스크립트 오류 관련해서 질문합니다.
0
689
1
장고 ORM 깃허브 업로드 관련 질문입니다.
0
425
1
결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.
0
1561
1
결과페이지 만들기 - css 강의 내 질문입니다.
0
302
0
테스트 사용자 이름을 결과페이지에 뜨게
0
279
0
js) 2/3 -> 3/3으로 안 넘어갑니다
0
330
1
질문지를 블록형태로 바꿀려면 어떻게 입력해야하나요??
0
262
1
제출 클릭 시 result로 못넘어가는 오류
0
356
1
구름 컨테이너 선택시 파이썬->장고 선택하면?
0
302
1
static.zip 링크가 없습니다!
0
249
1
display: flex 오류
0
584
0
안넘어가요.
1
353
1
다른 방식으로 구현하는 부분에 대한 질문입니다.
0
315
0
문항 클릭시 다음페이지로 넘어가게 할 수 있을까요?
0
603
1
uWSGI 소켓 설정 후에 프로젝트 화면 접근이 안 됩니다.
0
203
0
다 완성하고 배경색을 바꾸려고 하는데요
0
315
1
함수질문
0
255
1