[Wecode] Repl.it - 33. Event

hang_kem_0531·2022년 4월 29일
0

wecode

목록 보기
13/28

문제

이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.

input#re-password에 keyup 이벤트를 추가해주세요.

input#password 와 input#re-password의 value 속성을 통해 input에 작성된 값을 가져오고,

  • 서로 같은지 아닌지 확인해서 같지 않다면

  • <p>태그의 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.

  • 서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

내 풀이

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인" />
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>
const thisIsPw = document.getElementById('password');
const thisIsrePw = document.getElementById('re-password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];

const thisIsAlert = document.querySelector('p.alert');

thisIsrePw.addEventListener('keyup', function() {
  const password = thisIsPw.value;
  const rePassword = thisIsrePw.value;
  if (password !== rePassword) {
    thisIsAlert.innerHTML = "비밀번호가 일치하지 않습니다";
  } else {
    thisIsAlert.innerHTML = "";
  }
});

우선, html 화면은 다음과 같이 password id를 갖고 있는 비밀번호 input 하나와, re-password id를 갖고 있는 비밀번호 확인 input, 그리고 login-btn과 alert class를 갖고 있는 p 태그로 이루어져 있다.

문제가 요구하는 바는, 비밀번호 확인 input인 #re-password 속성에 keyup 이벤트를 추가하여, #password와 #re-password의 value가 같다면 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를, 다르면 "" 빈 문구를 추가하라는 것이다. 아마 alert가 repl.it에서 구현이 되지 않아서 p태그에 alert 클래스를 주고 문자열을 출력하라는 걸까..?

우선 각 input과 p태그의 접근 권한을 얻기 위해 각각 document.getElementByIddocument.querySelector를 통해 element를 반환해 주었다. 이러면 이 변수들을 통해서 해당 element에 접근할 수 있다.

그리고 비밀번호 확인 input에 keyup 이벤트를 추가하기 위해, 앞서 선언한 변수인 thisIsrePw에 addEventListener로 호출 함수를 작성해주었다. addEventListener는 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달한다. 이벤트로 키보드를 눌렀다 떼면 발생하는 'keyup'을 주었다.

그리고, 비밀번호 input과 비밀번호 확인 input이 같은지 아닌지를 비교해야 되기 때문에, 그 input들의 value를 변수에 할당하고 if문으로 같지 않으면 p 태그에 innerHTML을 통해 "비밀번호가 일치하지 않습니다"라는 문구를, 아니면 "" 빈 문구를 삽입해주었다.

비밀번호가 일치하지 않으면 이렇게 문구가 뜨게 된다. 실제로는 alert() 로 팝업창을 표시하거나, 로그인 버튼에 click 이벤트로 비밀번호 확인 input으로 되돌아가게 하는 방법을 많이 사용하는 거 같다.

const thisIsPw = document.getElementById('password');
const thisIsrePw = document.getElementById('re-password');
const thisIsButton = document.getElementsByClassName('login-btn')[0];

const thisIsAlert = document.querySelector('p.alert');

thisIsButton.addEventListener('click', function() {
    const password = thisIsPw.value;
    const rePassword = thisIsrePw.value;
    if (password !== rePassword) {
        thisIsrePw.value = '';
        thisIsrePw.focus();
        alert("비밀번호가 일치하지 않습니다!")
    } else {
      alert("로그인 성공!")
    }
  });

이런식으로 구현하면 성공! 그리 어렵지 않은 문제였다.

profile
Front-End Developer

0개의 댓글