인프런 커뮤니티 질문&답변

이영진

작성한 질문수

<M.B.I.T> 테스트 페이지 만들기! with Django

설문페이지 만들기 - js

안넘어가요.

작성

324

1/3에서는 잘 넘어가는데

2/3에서는 안넘어 갑니다.

html코드는 이거입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 유형찾기</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form">
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">1/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap">
                        <button class="next_btn">다 음</button>
                    </div>
                </div>
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">2/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn_sort">
                        <button class="prev_btn">이 전</button>
                        <button class="next_btn">다 음</button>
                    </div>
                </div>
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">3/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn_sort">
                        <button class="prev_btn">이 전</button>
                        <input type="submit" value="제 출" class="submit_btn"/>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
</body>
</html>

자바스크립트 코드는 이거입니다.

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(){
    $('.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();
    });

    $("#form").submit(function() {
        let radios = $('input[type=radio]:checked');
        if(radios.length < 10) {
            alert("문항이 선택되지 않았습니다.");
            return false;
        }
        return true;
    });

    $("html, body").animate({
        scrollTop: 0
    }, 500);
});

HTML/CSS django javascript

답변 1

Hara Chung

제가 강사님은 아니지만 저도 같은 문제를 겪었던 학생 입장으로서 제 해결 방법을 알려 드립니다.

학생분 form.html을 보시면 .answer div 내의 input id가 전부 "one"으로 되어 있습니다.

그러니까 첫 번째 문제의 .answer 세트에서는 id가 가령 "one"이었다면, 두 번째 문제의 .answer 세트에서는 id가 "two", 세 번째 문제의 .answer 세트에서는 "three" 이런 식으로 각각 다르게 바꾸어 주셔야 해요.

이게 정답이 아닐 수도 있는데 저는 여튼 이렇게 해결했어요!

이 학생분의 궁금증이 일찍 해결되었으면 좋았을 텐데 혹시 저처럼 똑같은 실수 하시는 분 계실까 봐 노파심에 저도 이렇게 해결 방법 남깁니다. 도움이 되기를 바라요!

이영진

질문자

답변 정말로 감사합니다! 한번 해보도록 하겠습니다!

peter9167

소스코드를 보여주실수 있을까요..?

Hara Chung

진짜 말 그대로 answer div 안에 있는 Input들 id를 각각 one, two, three 이렇게 바꿔 주시면 돼요 ㅎㅎ 제 소스 코드는 아래와 같습니다! (form.html이에요!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>나의 개발 유형 찾기</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <section id="survey">
        <div class="wrapper">
            <form id="form">
                <div class="test">
                    <div class="question_container">
                        <h3 class="number">1/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="one" type="radio" name="answer_1">
                            <label for="one">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap">
                        <button class="next_btn">다음</button>
                    </div>
                </div>


                <div class="test">
                    <div class="question_container">
                        <h3 class="number">2/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="two" type="radio" name="answer_2">
                            <label for="two">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn-sort">
                        <button class="prev_btn">이전</button>
                        <button class="next_btn">다음</button>
                    </div>
                </div>


                <div class="test">
                    <div class="question_container">
                        <h3 class="number">3/3</h3>
                        <h3 class="question">당신이 가장 재밌었던 수업은?</h3>
                    </div>
                    <div class="answer">
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                        <div>
                            <input id="three" type="radio" name="answer_3">
                            <label for="three">게임 개발(유니티, 언리얼, Pygame)</label>
                        </div>
                    </div>
                    <div class="btn_wrap btn-sort">
                        <button class="prev_btn">이전</button>
                        <input class="submit_btn" value="제출" type="submit"/>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
</body>
</html>

소스코드 감사합니다~~

작성한 질문수