아이디 비밀번호 입력시 로그인 버튼 색 활성화 하는법(classList , ,addEventListener)

const loginID = document.getElementsByClassName("loginId")[0];
const loginPW = document.getElementsByClassName("loginPw")[0];
const loginButtoN = document.getElementsByClassName("loginbutton")[0];
const iDpWinfo = document.getElementsByClassName("login")[0];

iDpWinfo.addEventListener("keyup", function () {
  let idValue = loginID.value;
  let pwValue = loginPW.value;
  if (idValue !== "" && pwValue !== "") {
    loginButtoN.classList.add("loginbutton-blue");
  } else {
    loginButtoN.classList.remove("loginbutton-blue");
  }
});

classList ??

DOM 객체의 class를 조작할 수 있게 하는것

add( String [, String [, ...]] )
지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

remove( String [, String [, ...]] )
지정한 클래스 값을 제거한다.

item( Number )
콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

toggle( String [, force] )
하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.

replace( oldClass, newClass )
존재하는 클래스를 새로운 클래스로 교체한다.

const loginID = document.getElementsByClassName("loginId")[0];
const loginPW = document.getElementsByClassName("loginPw")[0];
const loginButtoN=document.getElementsByClassName("loginbutton")[0];
const iDpWinfo = document.getElementsByClassName("login")[0];

iDpWinfo.addEventListener("keyup", function () {

addEventListener를 이용하여 keyup이벤트를 사용했다.

let idValue = loginID.value;

const loginID = document.getElementsByClassName("loginId")[0];
로그인input에 입력해서 나오는값을 idValue라고 만들었다.

let pwValue = loginPW.value;

const loginPW = document.getElementsByClassName("loginPw")[0];
비밀번호 input바에 입력해서 나오는 값을 pwValue라고 만들었다.

if (idValue !== "" && pwValue !== "") {

만약에 아이디에 값이 (""<빈값)이 아니고 그리고 비밀번호 값이 없지 않으면 if문 실행

loginButtoN.classList.add("loginbutton-blue");

classList.add로 ("loginbutton-blue")를 추가해서
loginbutton-blue css에있는 파란색을 가져오게 했다.

} else {
loginButtoN.classList.remove("loginbutton-blue");
}
})

아이디 비밀번호에 값이 없으면 loginbutton-blue효과를 지운다
그래서 원래 색상으로 되돌린다 여기서 loginbutton-blue 효과를 주기전에도 loginbutton-blue와 같은색으로 줬던거라 처음 색상으로 돌아가게된다.

값을 넣어주면 파란색으로 add해주고 값이 없는경우가되면 다시 remove해서 초기 색상으로 되돌릴수있다.