클릭하면 이벤트가 일어남 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
모두 충족시 로그인 성공 출력