2022.10.04 event.preventDefault()

event.preventDefault()

function 버튼활성화(event) {
  let idValue = document.getElementsByClassName("login")[0].value;
  let pwValue = document.getElementsByClassName("login")[1].value;
  if (idValue.length > 4 && pwValue.length > 4) {
    loginButton.style.backgroundColor = "rgb(0 149 246)";
  } else {
    loginButton.style.backgroundColor = "rgb(197 225 251)";
    event.preventDefault();
  }
}

📕 error

버튼을 활성화, 비활성화하는 과정에서 다음 단계로 넘어갈 수 없게 하기 위해
event.preventDefault() 를 사용하려고 했으나 작동이 안되었다

📘 solution

코드를 자세히 보면 '버튼비활성화'란 함수에 아무런 이벤트가 걸려있지 않다.
onclick 속성이나 addEventListener를 사용하지 않아서 이벤트 자체가 없었기 때문에 제제할 이벤트 자체가 없었던 것이다.
그래서 이 코드에서는 event.preventDefault()를 쓰는 것 보다
disabled 속성을 이용해야 한다.

let loginButton = document.getElementsByClassName("blue-button")[0];
let id = document.getElementsByClassName("login")[0];
let pw = document.getElementsByClassName("login")[1];
function activeBtn() {
  let idValue = document.getElementsByClassName("login")[0].value;
  let pwValue = document.getElementsByClassName("login")[1].value;
  if (idValue.length > 4 && pwValue.length > 4) {
    loginButton.style.backgroundColor = "rgb(0 149 246)";
    loginButton.disabled = false;
  } else {
    loginButton.style.backgroundColor = "rgb(197 225 251)";
    loginButton.disabled = true;
  }
}
id.addEventListener("input", activeBtn);
pw.addEventListener("input", activeBtn);

버튼 태그가 boolean 타입이라서 true,false를 통해 활성화,비활성화를 시킬 수 있었다.