[JS] 버튼 활성화 & 비활성화

<input> 영역의 입력 상황에 따라 <button>을 활성화 또는 비활성화하는 방법에 대해 정리해보았다.

요구사항

" 아이디, 패스워드 영역에 각각 한 글자 이상 입력된 상태에서만 버튼이 활성화되도록 해주세요. "

솔루션

.js

const button = document.querySelector(".loginBtn");
const input = document.querySelector(".input");
const name = document.querySelector(".inputName");
const pw = document.querySelector(".inputPw");

function changeColor() {
  // name과 pw의 값이 모두 undefined 이면
  if(name.value && pw.value) { 
    button.disabled = false; // 활성화
  } 
  // 그게 아니면
  else { 
    button.disabled = true; // 비활성화
  }
}

input.addEventListener('keyup',changeColor);

.css

/* disabled 의사 클래스를 이용해 비활성화 상태의 버튼 스타일 설정 */
.loginBtn:disabled {
  background-color: rgb(168, 202, 244); /* 흐린 색상의 배경 적용 */
}