TIL - ID와 PW 입력 시 버튼 활성화

sumin·2022년 5월 18일

로그인 아이디와 비밀번호 각각 한 글자 입력하면 로그인 버튼이 활성화 되게 하라

const loginBtn = document.getElementsByClassName("loginBtn")[0];
const loginId = document.getElementsByClassName("loginId")[0];
const loginPw = document.getElementsByClassName("loginPw")[0];

function btnEvent(){
	if (loginId.value && loginPw.value) {
 		loginBtn.removeAttribute("disabled");
 		loginBtn.style.backgroundColor = ("rgba(0,149,246,1)");
	} else if (loginId.value || loginPw.value) {
 		loginBtn.getAttribute("disabled");
		loginBtn.style.backgroundColor = ("rgba(0,149,246,.3)");
	}
};
loginId.addEventListener('keyup',btnEvent);
loginPw.addEventListener('keyup',btnEvent);

input의 value text와 password를 사용
button의 disabled(비활성화) 속성을 사용

input(아이디와 비밀번호)에 text 입력 -> 버튼 활성화 (disabled : false)
input(아이디와 비밀번호)에 text 제거 -> 버튼 비활성화 (disabled : true)

0개의 댓글