Javascript instagram UI 버튼클릭 활성화 Day-2

로그인 UI를 HTML과 CSS로 작업이 끝난 후에 버튼 활성화 하는 과제를 받고

javascript addEventListener 이벤트 종류도 다시 찾아보고 if문도 다시 복습하는 과제였다.

//html에서 아이디,패스워드 입력칸 버튼요소 가져오기
const loginId = document.getElementsByClassName("login-input")[0];
const loginPw = document.getElementsByClassName("login-input")[1];
const btn = document.getElementsByClassName("login-button")[0];
btn.disabled = true;
//if문으로 id나 pw입력칸에 글자가 하나라도 들어간다면 버튼활성화,버튼마우스커서 변경 및 색상변경
function btnEnable(event) {
  if (loginId.value.length >= 1 && loginPw.value.length >= 1) {
    btn.style.backgroundColor = "#39bad3";
    btn.disabled = false;
    btn.style.cursor = "pointer";
  } else {
    btn.style.backgroundColor = "#a3e5f3";
    btn.disabled = true;
  }
}
//각 input요소에 이벤트리스너메서드 추가
loginId.addEventListener("input", btnEnable);
loginPw.addEventListener("input", btnEnable);

//마우스 클릭을 하는 동안 버튼 색상 바꾸기
btn.addEventListener("mousedown", () => {
  btn.style.backgroundColor = "#a3e5f3";
  // btn.style.border = "0.5px solid lightgray";
});
//눌렀던 마우스클릭을 떼는 순간 버튼색상 바꾸기
btn.addEventListener("mouseup", () => {
  btn.style.backgroundColor = "#39bad3";
  // btn.style.border = "none";
});

//버튼에 마우스 커서가 올라갔을때와 벗어났을때 border를 줘봤는데 별로여서 뺌

// btn.addEventListener("mouseover", () => {
//   btn.style.border = "0.5px solid lightgray";
// });
// btn.addEventListener("mouseout", () => {
//   btn.style.border = "none";
// });

👍결과 화면✌

📌 Keypoint

• 이벤트를 부여할 요소에 접근
• 조건문 작성

❓ 느낀점

getElementsByClassName으로 요소를 가져오면 배열처럼 가져오기때문에 뒤에 가져오고자하는 index로

요소에 접근하는 법을 중간에 망각해서 몇시간은 해맸다😂

addEventListner에서 미리 작성한 함수를 콜백할때에는 호출이 아닌 정의 그자체로 가져와야하는데 그것도

망각해서 또 엄청 헤매고 멘토님한테 결국 물어보고 알았다... 처음에는 input요소들을 감싸고있는 div

자체에 이벤트리스너를 추가했었는데 멘토님한테 질문하니깐 상관은 없는데 굳이 라고 하셔서 그냥 input

에 이벤트를 주었다. 이번 과제는 하고나면 쉬웠는데 할 때에는 어려웠던 과제인것같다.