addEventListener僅適用于一個按鈕（多頁）-有解無憂

我在三個頁面上有三個按鈕（注冊、登錄和一個用于注銷的按鈕）。我與火力基地合作。我成功了，但在 3 個 js 檔案中，我需要在一個 js 檔案中執行此操作，但在一個檔案中，只有第一個按鈕起作用（代碼中的第一個按鈕）。我使用 js 模塊，我可以使用 onclick 執行此操作嗎？有人可以告訴我如何在多個頁面中為多個按鈕執行 addEventlistener 嗎？

我試過如果但它不起作用

//signup page, signup button id = signUp
signUp.addEventListener("click", (e) => {
  var fullname = document.getElementById('SignupName').value
  var email = document.getElementById('SignupEmail').value
  var password = document.getElementById('SignupPassword').value

  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;

      set(ref(database, 'users/'   user.uid), {
        fullname: fullname,
        email: email
      })
      alert('successful!!!')
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      alert(errorMessage);
      // ..
    });
});

//login page, login button id = LogIn
LogIn.addEventListener("click", (e) => {
  var email = document.getElementById('LoginEmail').value
  var password = document.getElementById('LoginPassword').value
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in 
      alert("login!!!")
      const user = userCredential.user;
      window.location.href = "gamescard.html"
      // ...
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      alert(errorMessage);
    });
});

uj5u.com熱心網友回復：

您必須為每個按鈕添加事件偵聽器。在您的 3 個按鈕上放置一個通用類，比如說“.logsButton”

您選擇所有 .logsButton：

   let els_logbuts = document.querySelectorAll('.logsButton);

現在您在每個上添加事件偵聽器：

els_logbuts.forEach((e) => e.addEventListener('click', function (e) {
    // element clicked
    let elclicked = e.target
    // ...
}));

現在你有了 clicked 元素，獲取它的 id (elcicked.id) 并呼叫相應的函式：登錄、注銷...

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/532203.html

標籤：javascripthtml按钮添加事件监听器

上一篇：如何將文本與元素的開頭對齊

下一篇：如何在主體后放置一個按鈕：容器？