• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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

답변을 작성해보세요.

답변을 기다리고 있는 질문이에요.
첫번째 답변을 남겨보세요!