console.log가 뜨지 않습니다.
0
TEST 글자를 숨기는 것까지는 되는데, 마지막 콘솔에 선택한 값들이 띄워지지 않습니다. 어디서 실수한 건가요?
HTML
<html>
<head>
<meta charset="utf-8" />
<title>회원가입</title>
<meta name="keyword" content="회원가입,html" />
<style>
#account-alert {
color: coral;
margin: 0 10px;
font-size: 13px;
font-weight: 900;
}
</style>
</head>
<body>
<h1>회원가입</h1>
<hr />
<form action="signup.html" method="POST">
<fieldset>
<legend>계정 정보</legend>
<div>
<label for="id-acount">아이디</label>
<input type="text" name="acount" id="id-acount" 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" id="account-alert">TEST</span>
</div>
<div>
<label for="id-password2">비밀번호 확인</label>
<input
type="password"
name="password2"
id="id-password2"
required="required"
/>
<span class="alert-message" id="account-alert">TEST</span>
</div>
</fieldset>
<fieldset>
<legend>프로필</legend>
<div>
<label for="id-name">이름</label>
<input type="test" 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"
/>
<select name="birth-month" required="required">
<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"
/>
<span class="alert-message" id="account-alert">TEST</span>
</div>
<div>
<label>성별</label>
<input
type="radio"
name="gender"
id="id-gender-male"
required="required"
value="male"
/>
<label for="id-gender-male">남</label>
<input
type="radio"
name="gender"
id="id-gender-female"
required="required"
value="female"
/>
<label for="id-gender-female">여</label>
<input
type="radio"
name="gender"
id="id-gender-unknown"
required="required"
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" required="required" />
<label for="id-agree"
>사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label
>
</div>
<button type="submit">가입하기</button>
</form>
<script src="./js/validation.js"></script>
</body>
</html>JS
window.addEventListener("load", function () {
clearMessages();
var formElem = document.querySelector("form");
formElem.onsubmit = submitForm;
});
function clearMessages() {
var message = document.getElementsByClassName("alert-message");
for (var i = 0; i < message.length; i++) {
message[i].style.display = "none";
}
}
function submitForm() {
var accountInput = document.querySelector("input[name='account']");
var passwordInput = document.querySelector("input[name='password']");
var passwordConfirmInput = document.querySelector("input[name='password2']");
var selectInput = document.querySelector('select[name="birth-month"]');
var radioInput = document.querySelector('input[name="gender"]:checked');
var checkInput = document.querySelector('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;
}답변 1
1
안녕하세요,
노기력인간님!
HTML파일 중에
<div>
<label for="id-acount">아이디</label>
<input type="text" name="account" id="id-acount" required="required" />
<span class="alert-message" id="account-alert">TEST</span>
</div>
의 부분에 오타가 있었습니다.
name = "acount" 가 아닌 name = "account"로 수정해주셔야 합니다😃
왜냐하면 js 파일이
document.querySelector("input[name='account']");
라는 쿼리셀렉터로 값을 찾기 때문에 같은 값이 들어가야합니다!
질문에 대한 답변이 되었기를 바랍니다🙈
감사합니다.
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