TIL : ) 로그인 활성화하기

id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요. 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!

내 처음 코드

const id = document.getElementById("userId");
const pw = document.getElementById("password")
const btn = document.getElementsByTagName("button")[0];
const inputTag = document.getElementsByTagName("input")[0];

inputTag.addEventListener('keyup',checkPassword);

function checkPassword(){
    if (id.value.length>0 && password.value.length > 0) {
        btn.style.backgroundColor = "#0094F6";
      }else {
        btn.style.backgroundColor = "#0094f656";
      }
    }

실행 결과
내 예상과 다르게 두번째 입력부터 활성화가 되었다.
간단하게 생각했었는데...오랜 시간이 걸렸..다..

이유는 addEventListener('keyup',function(){}); 이벤트를 자세하게 모르고 사용했기 때문이다.

keyup과 keydown의 이벤트가 발생하는 차이때문

즉, keyup은 값을 전달한 다음 이벤트가 발생하고
keydown은 반대로 이벤트가 발생한 다음 값을 전달한다.

사람 입장에서는 그 순간의 차이가 같은 연결동작처럼 보이지만
컴퓨터 입장에서는 구분동작으로 보기 때문에 이러한 문제가 발생한다.

1차 수정한 코드

id.addEventListener('keyup',checkPassword);
password.addEventListener('keyup',checkPassword);

function checkPassword(){
    if (id.value.length > 0 && password.value.length > 0) {
        btn.style.backgroundColor = "#0094F6";
      }else {
        btn.style.backgroundColor = "#0094f656";
      }
    }

로그인 버튼 활성화 기능을 구현하며 삼항 연산자를 반드시 적용해보세요.

2차 수정 코드

function checkPassword() {
    id.value.length > 0 && password.value.length > 0 ?
    btn.style.backgroundColor = "#0094F6" :
    btn.style.backgroundColor = "#0094f656" ;
}

삼함 연산자를 사용하여 작성한 코드이다.
코드가 너무 길고 이상한거 같아 js로 스타일을 변경하는 방식이아닌 disabled를 이용하여 활성화를 시키는 새로운 코드 작성했다.

참고 - disabled - MDN

//HTML
<div class="btn">
    <button disabled >로그인</button>
</div>

//CSS
.btn button {
  background-color: #0095F6;// 활성화 색상
}
.btn button:disabled { 
    background-color: #0094f656;// 비활성 색상
}

//JS
function checkPassword() {
    id.value.length > 0 && password.value.length > 0 ?
    btn.disabled= false : btn.disabled=true;
}

추가구현

현재 id, pw 입력 시 부조건 로그인 버튼이 활성화 외어 있도록 구현이 되어 있습니다.
실제 로그인 하는 경우를 생각하며 validation(유효성 검사) 기능을 추가해주세요.
ex) id >>> '@' 포함 / pw >>> 5글자 이상

function checkPassword() {
    id.value.indexOf('@') >= 0 && password.value.length >= 5 ? 
    btn.disabled= false : btn.disabled=true;
}

로그인 유효성 검사를하기 위해 indexOf()로 id의 value값 중
'@'이가 들어가도록 조건문을 만들었고 password가 5이상이여야하는 조건문을 만들었다.