JavaScript事件监听器异常：仅首个定义的监听器生效问题排查求助

Hey Theresa, let's break down what's happening here and fix your issue!

When you share the same app.js file across both pages, every line of code runs on every page load—even if the elements it's looking for don't exist on that page.

For example:

• On loginUsername.html, there's no .todo-button or .todo-list element. So when document.querySelector(".todo-button") runs, it returns null. Trying to call addEventListener on null throws a TypeError, which stops all subsequent code from executing. That's why if you define the todo button listener first, the login button listener never gets added.
• The reverse happens on addtask.html: document.querySelector(".loginBtn") returns null, so if you define the login listener first, the todo-related listeners never run.

Using IDs instead of classes doesn't fix this because the core problem is that the elements simply don't exist on one of the pages, so any selector will return null for them.

The fix is simple: only run code for elements that actually exist on the current page. You can do this in two main ways:

1. Check if elements exist before adding event listeners #

Wrap your event listener code in conditionals that verify the element isn't null first.

2. Scope code to specific pages #

Detect which page is loaded (by checking for a unique element or the URL) and only run the relevant code for that page. This is cleaner because you don't even try to select elements that aren't present.

Here's how you can adjust your app.js using the second approach (page-scoped code):

// Handle login page logic (only runs on loginUsername.html)
const loginContainer = document.querySelector(".login");
if (loginContainer) {
  const buttonLogin = document.querySelector(".loginBtn");
  const input = document.querySelector("#usernameLabel");

  buttonLogin.addEventListener("click", doLogin);

  // Make sure your doLogin function is defined here or accessible
  function doLogin() {
    const username = input.value.trim();
    if (username) {
      localStorage.setItem("username", username);
      window.location.href = "addtask.html";
    }
  }
}

// Handle task page logic (only runs on addtask.html)
const taskForm = document.querySelector("#formTasks");
if (taskForm) {
  const todoInput = document.querySelector(".todo-input");
  const todoButton = document.querySelector(".todo-button");
  const todoList = document.querySelector(".todo-list");

  todoButton.addEventListener("click", addTodo);
  todoList.addEventListener("click", deleteOrCheck);

  // Define your addTodo and deleteOrCheck functions here
  function addTodo(e) {
    e.preventDefault();
    // Your existing add task logic here
  }

  function deleteOrCheck(e) {
    // Your existing delete/check logic here
  }
}

This way, when the login page loads, only the login-related code runs (since #formTasks doesn't exist), and when the task page loads, only the task-related code runs (since .login doesn't exist). No more null errors stopping your code!

Make sure your helper functions (doLogin, addTodo, deleteOrCheck) are either defined inside the page-specific blocks or are written in a way that they don't try to access elements that don't exist on the current page.

内容的提问来源于stack exchange，提问作者Theresa