[JS] 로그인 버튼 활성화

목표

id, pw 에 각각 한 글자 이상 써야 로그인 버튼이 활성화 되도록 작업

코드

const emailInp = document.getElementById('email');
const pwInp = document.getElementById('password');

function checkInp() {
  const btnLogin = document.getElementById('btnLogin');
  pwInp.value.length > 0 && emailInp.value.length > 0
    ? (btnLogin.disabled = false)
    : (btnLogin.disabled = true);
}

emailInp.addEventListener('keyup', checkInp);
pwInp.addEventListener('keyup', checkInp);

구현 과정

3가지 방법을 고민함.

• 1. <input> 태그에 onkeyup property를 통한 제어, 함수만 별도 생성
• 2. input의 문자열 길이를 체크하는 함수(checkInp)를 만들어
     id와 pw에 각각addeventListener('keyup', checkInp) 과 같이 만든 함수를 넣어줄 것
• 3. 페이지내 <input> 태그를 모두 불러와 반복문으로 각각 addeventListener 를 적용시켜주는 것

결과적으로 적용한 것은 2번째 방법이었고,
이유는 페이지 내 다른 기능이 없을 뿐더러 간결하고 보기 좋은 코드가 나오기 때문이였다.
<input> 태그가 disabled 상태인경우 css에 변경될 점을 미리 작성해놓았다.
아래는 구현된 페이지의 시연영상을 첨부한 것이다.

: 간결하고 이해하기 좋은 코드를 만들자.