-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
안넘어가요.
21.12.20 08:28 작성 조회수 169
1
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);
});
답변을 작성해보세요.
2
Hara Chung
2022.03.02
제가 강사님은 아니지만 저도 같은 문제를 겪었던 학생 입장으로서 제 해결 방법을 알려 드립니다.
학생분 form.html을 보시면 .answer div 내의 input id가 전부 "one"으로 되어 있습니다.
그러니까 첫 번째 문제의 .answer 세트에서는 id가 가령 "one"이었다면, 두 번째 문제의 .answer 세트에서는 id가 "two", 세 번째 문제의 .answer 세트에서는 "three" 이런 식으로 각각 다르게 바꾸어 주셔야 해요.
이게 정답이 아닐 수도 있는데 저는 여튼 이렇게 해결했어요!
이 학생분의 궁금증이 일찍 해결되었으면 좋았을 텐데 혹시 저처럼 똑같은 실수 하시는 분 계실까 봐 노파심에 저도 이렇게 해결 방법 남깁니다. 도움이 되기를 바라요!
Hara Chung
2022.03.07
진짜 말 그대로 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>
답변 1