Replit 33. JS 응용

홍석현·2022년 10월 21일
0

click이벤트

클릭하면 이벤트가 일어남 ex) 로그인버튼, 검색버튼

<HTML>
    <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>
<Script>
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 ==""||password.length < 5){
    thisIsAlert.innerHTML="비밀번호를 입력하세요"
  }else if(rePassword == ""){
    thisIsAlert.innerHTML="비밀번호 확인을 입력해주세요";
  }else if(password !== rePassword){
    thisIsRePW.value = '';
    thisIsRePW.focus();
    alert("비밀번호 틀림")
  }else{
    alert("로그인성공")
  }
})

비밀번호가 빈칸이거나 5글자 미만이면 경고창에 비밀번호를 입력하세요.
비밀번호 확인칸이 비어있으면 비밀번호 확인을 입력해주세요.
비밀번호칸과 비밀번호 확인칸의 값이다르면 경고창에 비밀번호 틀림
출력 후 thisIsPW 입력값 초기화 후 커서 on
모두 충족시 로그인 성공 출력

profile
Front-end to Full-stack

0개의 댓글