해결된 질문
작성
·
135
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파일 중에
의 부분에 오타가 있었습니다.
name = "acount" 가 아닌 name = "account"로 수정해주셔야 합니다😃
왜냐하면 js 파일이
document.querySelector("input[name='account']");
라는 쿼리셀렉터로 값을 찾기 때문에 같은 값이 들어가야합니다!
질문에 대한 답변이 되었기를 바랍니다🙈
감사합니다.