콘솔이 안나옵니다.
782
작성한 질문수 2
자바스크립트 연결은 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: 실행이 안되도록 지정
}답변 2
0
안녕하세요,
anny1515님!
HTML과 JS코드를 같이 올려주셔서 감사합니다.
확인해본 결과,
1.JS파일에 "querySelector"의 오타가 있습니다.
//select, radio, checkbox
의 주석 아래있는 코드에 "querySlector" 라고 오타가 있어,
에러가 뜬 상태로 리턴되어 원하는 콘솔 로그 값이 안 뜨고, 새로고침만 되는 것으로 추정됩니다.
2. anny1515 님께서 질문하신 부분은 1번만 참고하셔도 해결이 되지만,
<form action="validation.html" method="POST"></form>
form태그가 열리자 마자 닫히는 태그로 되어 있어 알려드립니다.
혹시 에러가 발생하신다면, 확인해보시길 바랍니다.
또한 에러를 찾는 콘솔로그의 방법 중에 하나로,
페이지의 새로고침과 관계없이 콘솔의 내용을 누적(?)해서 확인할 수 있는 방법이 있습니다.
위 사진과 같이 콘솔창의 톱니바퀴 모양을 누르시고,
preserve Log를 누르시면, 오류를 찾는데에 도움이 되는 기능을 활용해 보실 수 있습니다!😃
감사합니다
0
<!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>unregistered 이라 뜨며 작동하지 않습니다.
0
50
1
공부한 내용을 블로그에 정리해서 올려도되나요?
0
93
1
sublime text 설치 불가
0
176
1
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
0
98
1
처음 질문과 옵션 관련 질문입니다.
0
89
1
마지막에 news 관련 질문
0
81
1
태그 닫는 단축키가 뭔가요?
0
169
1
강의에 사용하는 예제 코드 자료 있나요?
0
384
1
회원가입 폼 검증하기 실행이 안됩니다.
0
273
1
이미지랑 아이콘 파일을 어떻게 찾아요?
0
350
1
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
0
475
0
프로젝트 고민 해결이 안되어 다시 올립니다.
0
391
1
프로젝트 고민 다시올립니다.
0
445
1
친구와의 프로젝트 고민
0
418
1
화면 오른쪽 스크롤이 넘어가질 않아요!
0
514
1
학과 설정
0
328
2
회원가입폼 검증 -2 에서 문제가생겼습니다
0
327
1
card.html 버튼 위치
0
599
1
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
0
355
2
carousel의 footer부분에
0
292
1
margin 값에 관한 질문입니다.
0
403
1
function clearMessages() 함수의 원리를 알고싶습니다
0
315
1
removeEventListener
0
232
1
버튼을 눌렀을때 케러셀의 이동
0
805
2