id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요.
원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!
const button = document.getElementsByClassName('loginBtn')[0];
const input = document.getElementsByClassName('input')[0];
const name = document.getElementsByClassName("inputName")[0];
const pw = document.getElementsByClassName("inputPw")[0];
function changeColor() {
if(name.value && pw.value) {
button.removeAttribute('disabled');
button.style.backgroundColor='#0095F6';
}
}
input.addEventListener('keyup',changeColor);
변수명 너무 복잡하게 하지 말자.
e.g. thisIsButton -> button
document.getElementsByClassName('loginBtn')[0]
loginBtn class의 요소가 배열로 담기기 때문에 첫번째 요소임을 꼭 써야한다.
if(name.value && pw.value)
name변수의 값과 pw변수의 값이 true라면(입력되었다면)😢
button.removeAttribute('disabled')
button변수의 disabled속성 제거
input.addEventListener('keyup',changeColor)
input변수에 keyup이벤트가 발생하면 changeColor함수를 실행