why addEventListener doesn't work in my code in JavaScript

Question

I have problem with addEventListener in my code. These are Todo Tasks but when I use addEventListener to remove them by clicking button it doesn't work, but when I declare only function inside addTask function it works, so I delete the tasks with button.

var Task, TodoList, deleteButton, editButton, completeButton;

function addTask() {
  var inputValue = document.getElementsByTagName("input")[0];
  TodoList = document.getElementsByClassName("todo-list")[0];
  Task = document.createElement("li");
  var txt = document.createTextNode(inputValue.value);
  if (inputValue.value == "" || isNaN(inputValue.value) !== true) {
    alert("Input is not unacceptable");
  } else {
    Task.classList.add("li-item");
    Task.appendChild(txt);
    TodoList.appendChild(Task);
  }
  inputValue.value = " ";
    createButton();
    deleteButton.addEventListener("click", deleteTask);
}

function createButton() {
    deleteButton = document.createElement("button");
    editButton = document.createElement("button");
    completeButton = document.createElement("button");
    deleteButton.appendChild(document.createTextNode("Delete"));
    deleteButton.classList.add("delete-btn");
    Task.appendChild(deleteButton);
    editButton.appendChild(document.createTextNode("Edit"));
    Task.setAttribute("contentEditable", "false");
    editButton.classList.add("edit-btn");
    Task.appendChild(editButton);
    completeButton.appendChild(document.createTextNode("Complete"));
    completeButton.classList.add("complete-btn");
    Task.appendChild(completeButton);
}

function deleteTask() {
    TodoList.removeChild(Task);
}

Also this code removes just the last child.

It looks like Task is a global variable and thus exists only once. A variable can only have one value. When deleteTask is called (from whichever element) it will remove the node that is referenced by Task at that moment. — Felix Kling
– Felix Kling, Commented Apr 27, 2021 at 20:18
Also this code removes just the last child. You are updating Task every time addTask() runs, but your deleteTask always deletes Task, which, at the time of execution, always holds a reference to the last created list item. — connexo
– connexo, Commented Apr 27, 2021 at 20:19

Ernesto · Accepted Answer · 2021-04-27 21:14:20Z

You need to run yow code once the dom mounted

window.addEventListener('DOMContentLoaded', (event) => {
    var Task, TodoList, deleteButton, editButton, completeButton;

function addTask() {
  var inputValue = document.getElementsByTagName("input")[0];
  TodoList = document.getElementsByClassName("todo-list")[0];
  Task = document.createElement("li");
  var txt = document.createTextNode(inputValue.value);
  if (inputValue.value == "" || isNaN(inputValue.value) !== true) {
    alert("Input is not unacceptable");
  } else {
    Task.classList.add("li-item");
    Task.appendChild(txt);
    TodoList.appendChild(Task);
  }
  inputValue.value = " ";
    createButton();
    deleteButton.addEventListener("click", deleteTask);
}

function createButton() {
    deleteButton = document.createElement("button");
    editButton = document.createElement("button");
    completeButton = document.createElement("button");
    deleteButton.appendChild(document.createTextNode("Delete"));
    deleteButton.classList.add("delete-btn");
    Task.appendChild(deleteButton);
    editButton.appendChild(document.createTextNode("Edit"));
    Task.setAttribute("contentEditable", "false");
    editButton.classList.add("edit-btn");
    Task.appendChild(editButton);
    completeButton.appendChild(document.createTextNode("Complete"));
    completeButton.classList.add("complete-btn");
    Task.appendChild(completeButton);
}

function deleteTask() {
    TodoList.removeChild(Task);
}

})

Collectives™ on Stack Overflow

why addEventListener doesn't work in my code in JavaScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related