CODEWITHSUNDEEP
javascripthtml
amin mahjoob
amin mahjoob

Reputation: 23

why addEventListener doesn't work in my code in JavaScript

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.

Upvotes: 0

Views: 87

Answers (1)

Ernesto
Ernesto

Reputation: 4272

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);
}

})

Upvotes: 1

Related Questions