이벤트리스너 콜백함수 파라미터넣기

[송원준]

 <div class="alert">
      <p class="alertBox"></p>
      <button class="closeBox">닫기</button>
    </div>
    <button class="btn1">버튼1</button>
    <button class="btn2">버튼2</button>
    <script>
      const alert = document.querySelector(".alert");
      const alertWindow = document.querySelector(".alertBox");
      const btn1 = document.querySelector(".btn1");
      const btn2 = document.querySelector(".btn2");
      const closeBox = document.querySelector(".closeBox");

      function alertWindowToggle(which) {
        if (which === "pleaseid") {
          alertWindow.innerHTML = "Please Input Your ID";
          alert.style.display = "block";
        } else if (which === "password") {
          alertWindow.innerHTML = "Please Input Your Password";
          alert.style.display = "block";
        }
      }

      function closeAlertBox() {
        alert.style.display = "none";
      }

      closeBox.addEventListener("click", closeAlertBox);
      btn1.addEventListener("click", alertWindowToggle("pleaseid"));
      btn2.addEventListener("click", alertWindowToggle("password"));
    </script>


이렇게 하면 왜 버튼1, 버튼2 눌렀을 때 알림창이 안뜨는지 모르겠습니다..

[송원준]

.alert {
  display: none;
  width: 300px;
  height: 200px;
  background: skyblue;
}

CSS 파일에는 이렇게 작성되어 있습니다.

[codingapple]

.addEventListener("click", function(){
   alertWindowToggle("pleaseid")
})
합시다

[송원준]

무슨 차이가 있나요?? 똑같은거 아닌가욤?

[codingapple]

콜백함수자리에 이름있는 함수넣으려면 함수이름만 넣게 되어있어서 그렇습니다

[글쓴이]

글