• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

console.log가 뜨지 않습니다.

21.04.19 21:55 작성 조회수 88

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;
}
course-thumbnail

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

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

강의실 바로가기

답변 1

답변을 작성해보세요.

1

itjustbong님의 프로필

itjustbong

2021.04.20

안녕하세요,
노기력인간님!

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']");
라는 쿼리셀렉터로 값을 찾기 때문에 같은 값이 들어가야합니다!

질문에 대한 답변이 되었기를 바랍니다🙈
감사합니다.

이 글과 비슷한 Q&A