Only one of the event listeners is working-CodePudding

I am new to javaScript and I am trying to make a simple webpage where you insert your Username click login and go to another page where you can add tasks (and where your username is shown on the Header).. like a todo list.

I made the first webpage (loginUsername.html) with the Loginbutton and it works:

  <body>
    <div >
      <h1>Write your username:</h1>
      <input
        id="usernameLabel"
        type="text"
        placeholder="Insert your Username"
        required="required"
      />
      <button  id="loginBtn">I wanna see my tasks.</button>
    </input>
   </div>
    <script src="app.js"></script>
  </body>

I then made the page where you add each task, when I click on my add button it will create a new task:

 <body>
        <header id="mainHeader">
          <div >
            <h1 id="headerTitle">To do list ...</h1>
            <h2 id="headerUsername">
              Hello
              <span id="Username"></span>
            </h2>
            <script>
              document.getElementById("Username").innerHTML =
                localStorage.getItem("username");
            </script>
          </div>
        </header>

        <form id="formTasks">
      <input type="text"  />
      <button  type="submit" id="todo-button">
        <i ></i>
      </button> </input> 
    </form>

    <div >
      <ul ></ul>
    </div>

    <script src="app.js"></script>
  </body>

Everything was working fine separately but when I try to put them together only the first defined event listener worked. That is if I have the login button event listener first - I can do the login on the loginUsername.html but I cannot add new tasks on the addtask.html.

var buttonLogin = document.querySelector(".loginBtn"); /*loginUsername.html*/
const input = document.querySelector("#usernameLabel"); /*loginUsername.html*/
const todoInput = document.querySelector(".todo-input");  /*addtask.html*/
var  todoButton = document.querySelector(".todo-button") /*addtask.html*/
var todoList = document.querySelector(".todo-list"); /*addtask.html*/

/* Action listeners */
buttonLogin.addEventListener("click", doLogin);
todoButton.addEventListener("click",addTodo);
todoList.addEventListener("click", deleteOrCheck);

If I put the todoButton event listener first, I can add tasks but, the login button will not work on the loginUsername.html.

  //Selectors
    
    var buttonLogin = document.querySelector(".loginBtn"); /*loginUsername.html*/
    const input = document.querySelector("#usernameLabel"); /*loginUsername.html*/
    const todoInput = document.querySelector(".todo-input");  /*addtask.html*/
    var  todoButton = document.querySelector(".todo-button") /*addtask.html*/
    var todoList = document.querySelector(".todo-list"); /*addtask.html*/
    
    /* Action listeners */
    todoButton.addEventListener("click",addTodo);
    buttonLogin.addEventListener("click", doLogin);
    todoList.addEventListener("click", deleteOrCheck);

I have no idea why this is happening and I honestly do not know where to search for a fix. I tried to call the buttons by ID instead of class but it did not work as well. Any help would be greatly appreciated. Thank you very much.

CodePudding user response：

The reason your script failed was that not all the .addEventListener() methods could be called as not all the buttons exist on both pages. You could use the "optional chaining operator" ?. to overcome this problem:

const buttonLogin = document.querySelector(".loginBtn"); /*loginUsername.html*/
const input = document.querySelector("#usernameLabel"); /*loginUsername.html*/
const todoInput = document.querySelector(".todo-input");  /*addtask.html*/
const todoButton = document.querySelector(".todo-button") /*addtask.html*/
const todoList = document.querySelector(".todo-list"); /*addtask.html*/

/* Action listeners */
function showme(ev){console.log(ev.target.tagName, ev.target.className || ev.target.id)}
buttonLogin?.addEventListener("click",showme);
todoButton?.addEventListener("click",showme);
todoList?.addEventListener("click",showme);

<button >to do</button>

In the above snippet only the .todo-button exists. Only this button gets the eventlister assigned to.

CodePudding user response：

Each time you load an html file, it loads the javascript file. When you are on the login page, the javascript file loads but cant find the todo button. When you load the todo page, it can't find the login button.

If you open up the dev console on the browser you are using(Usually F12) , you will see an error message stating that it cannot add an event listener - "cannot read properties of null".

I would recommended using https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction for some more information on how the DOM works.