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 class="login">
<h1>Write your username:</h1>
<input
id="usernameLabel"
type="text"
placeholder="Insert your Username"
required="required"
/>
<button class="loginBtn" 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 class="container-Header">
<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" class="todo-input" />
<button class="todo-button" type="submit" id="todo-button">
<i class="fa fa-plus-square"></i>
</button> </input>
</form>
<div class="todo-container">
<ul class="todo-list"></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.
>Solution :
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 class="todo-button">to do</button>In the above snippet only the .todo-button exists. Only this button gets the eventlister assigned to.