-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
콘솔이 안나옵니다.
21.04.05 16:53 작성 조회수 298
0
자바스크립트 연결은 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: 실행이 안되도록 지정
}
답변을 작성해보세요.
0
itjustbong
2021.04.06
안녕하세요,
anny1515님!
HTML과 JS코드를 같이 올려주셔서 감사합니다.
확인해본 결과,
1.JS파일에 "querySelector"의 오타가 있습니다.
//select, radio, checkbox
의 주석 아래있는 코드에 "querySlector" 라고 오타가 있어,
에러가 뜬 상태로 리턴되어 원하는 콘솔 로그 값이 안 뜨고, 새로고침만 되는 것으로 추정됩니다.
2. anny1515 님께서 질문하신 부분은 1번만 참고하셔도 해결이 되지만,
<form action="validation.html" method="POST"></form>
form태그가 열리자 마자 닫히는 태그로 되어 있어 알려드립니다.
혹시 에러가 발생하신다면, 확인해보시길 바랍니다.
또한 에러를 찾는 콘솔로그의 방법 중에 하나로,
페이지의 새로고침과 관계없이 콘솔의 내용을 누적(?)해서 확인할 수 있는 방법이 있습니다.
위 사진과 같이 콘솔창의 톱니바퀴 모양을 누르시고,
preserve Log를 누르시면, 오류를 찾는데에 도움이 되는 기능을 활용해 보실 수 있습니다!😃
감사합니다
0
anny1515
질문자2021.04.05
<!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>
답변 2