콘솔이 안나옵니다.

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

실습: 회원가입 폼 검증하기 - 1 (3-20)

작성

624

자바스크립트 연결은 alert창이 떠서 확인 했는데

밑에 console.log를 했을때 적용이 안됩니다.

'가입하기'버튼만 누르면 그냥 새로고침만 됩니다.

뭐가 잘못되었을까요...?.

window.addEventListener('load',function(){ //이벤트를 여러개 지정 가능
	clearMessages();

	var formElement=document.querySelector('form');
	formElement.onsubmit=submitForm; //on지정후 이벤트명 지정

});// 페이지가 로드되는 시점부터 코드가 실행됨을 보장

function clearMessages(){
	var messages=document.getElementsByClassName('alert-message');
	//class이름을 이용해서 HTML요소들을 가져오는 메소드
	for (var i=0; i<messages.length; i++){
		messages[i].style.display='none';
	}
}

function submitForm() {
	//account info
	var accountInput=document.querySelector('input[name="account"]');
	//document.querySelector: DOM의 자식 노드를 순회하여 매개변수의 선택자를 찾아 반환
	var passwordInput=document.querySelector('input[name="password"]');
	var passwordConfirmInput=document.querySelector('input[name="password2"]');

	//select, radio, checkbox
	var selectInput=document.querySlector('select[name="birth-month"]');
	var radioInput=document.querySlector('input[name="gender"]:checked');
	var checkInput=document.querySlector('input[name="agree"]');

	console.log(accountInput.value);
	console.log(passwordInput.value);
	console.log(passwordConfirmInput.value);

	console.log(selectInput.value);
	console.log(radioInput.value);
	console.log(checkInput.value);

	return false; //return false: 실행이 안되도록 지정
}

javascript HTML/CSS

답변 2

itjustbong

안녕하세요,

anny1515님!

HTML과 JS코드를 같이 올려주셔서 감사합니다.

확인해본 결과,

1.JS파일에 "querySelector"의 오타가 있습니다.

//select, radio, checkbox

의 주석 아래있는 코드에 "querySlector" 라고 오타가 있어,
에러가 뜬 상태로 리턴되어 원하는 콘솔 로그 값이 안 뜨고, 새로고침만 되는 것으로 추정됩니다.

2. anny1515 님께서 질문하신 부분은 1번만 참고하셔도 해결이 되지만,
<form action="validation.html" method="POST"></form>
form태그가 열리자 마자 닫히는 태그로 되어 있어 알려드립니다.

혹시 에러가 발생하신다면, 확인해보시길 바랍니다.

또한 에러를 찾는 콘솔로그의 방법 중에 하나로,
페이지의 새로고침과 관계없이 콘솔의 내용을 누적(?)해서 확인할 수 있는 방법이 있습니다.

위 사진과 같이 콘솔창의 톱니바퀴 모양을 누르시고,
preserve Log를 누르시면, 오류를 찾는데에 도움이 되는 기능을 활용해 보실 수 있습니다!😃

감사합니다

anny1515

질문자

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keyword" content="회원가입,html">
	<style>
		.alert-message {
			margin: 0 10px;
			color: #f09090;
			font-size: 14px;
			font-weight: 900;
		}
	</style>
	<title>회원가입</title>
</head>
<body>
	<h1>회원가입</h1>
	<hr/>
	<fieldset>
		<legend>계정 정보</legend>
		<form action="validation.html" method="POST"></form>
			<div>
				<label for="id-account">아이디</label>
				<input type="text" name="account" id="id-account" required="required">
				<span class="alert-message" id="account-alert">TEST</span>
			</div>
			<!-- //아이디 -->
			<div>
				<label for="id-password">비밀번호</label>
				<input type="password" name="password" id="id-password" required="required">
				<span class="alert-message">TEST</span>
			</div>
			<!-- //비밀번호 -->
			<div>
				<label for="id-password2">비밀번호확인</label>
				<input type="password" name="password2" id="id-password2" required="required">
				<span class="alert-message">TEST</span>
			</div>
			<!-- //비밀번호확인 -->
	</fieldset>

	<fieldset>
		<legend>프로필</legend>
		<div>
			<label for="id-name">이름</label>
			<input type="text" name="name" id="id-name" required="required">
			<span class="alert-message" id="account-alert">TEST</span>
		</div>
		<!-- //이름 -->
		<div>
			<label>생년월일</label>
			<input type="number" name="birth-year" placeholder="년" min="1900" max="2021" required="required">
			<span class="alert-message" id="account-alert">TEST</span>
			<select name="birth-month">
				<option>월</option>
				<option value="1">1월</option>
				<option value="2">2월</option>
				<option value="3">3월</option>
				<option value="4">4월</option>
				<option value="5">5월</option>
				<option value="6">6월</option>
				<option value="7">7월</option>
				<option value="8">8월</option>
				<option value="9">9월</option>
				<option value="10">10월</option>
				<option value="11">11월</option>
				<option value="12">12월</option>
			</select>
			<input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required">
		</div>
		<!-- //생년월일 -->
		<div>
			<label>성별</label>
			<input type="radio" name="gender" id="id-gender-male" value="male"/>
			<label for="id-gender-male">남</label>
			<input type="radio" name="gender" id="id-gender-female" value="female"/>
			<label for="id-gender-female">여</label>
			<input type="radio" name="gender" id="id-gender-unknown" value="unknown"/>
			<label for="id-gender-unknown">기타</label>
			<span class="alert-message" id="account-alert">TEST</span>
		</div>
		<!-- //성별 -->
		</fieldset>
			<div>
				<input type="checkbox" name="agree" id="id-agree">
				<label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label>
			</div>
			<input type="submit" value="가입하기"/>
			<button type="submit">가입하기</button>
		</form>
		<script type="text/javascript" src="scripts/validation.js"></script>
	</fieldset>
</body>
</html>

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

콘솔이 안나옵니다.

anny1515님!