I have just started learning javascript. I am creating a ToDo app. Whenever I click on Add Task button the myFunction which I created is not working as it suppose to. Whenever the button is clicked it takes seconds to respond plus the output on console is being multiplied. Thanks in advance. Much Appreciated.

function myFunction() {
  // code to be executed when the button is clicked
  const taskInput = document.getElementById("taskInput");
  const taskList = document.getElementById("taskList");
  //const task = taskInput.value.trim();
  const myButton = document.getElementById("mButton");

  //document.getElementById("taskList").innerHTML = userInput;
  myButton.addEventListener("click", function() {
    const li = document.createElement("li");
    li.createElement = '${taskInput.value} <button class="delete" onclick="deleteTask">Delete</button>';
    console.log("I m clicked");
  });
}

<script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <input type="text" id="taskInput" placeholder="Enter a task" />
  <button id="mButton" onclick="myFunction()">Add Task</button>
  <ul id="taskList"></ul>
</div>

I have just started learning javascript. I am creating a ToDo app. Whenever I click on Add Task button the myFunction which I created is not working as it suppose to. Whenever the button is clicked it takes seconds to respond plus the output on console is being multiplied. Thanks in advance. Much Appreciated.

function myFunction() {
  // code to be executed when the button is clicked
  const taskInput = document.getElementById("taskInput");
  const taskList = document.getElementById("taskList");
  //const task = taskInput.value.trim();
  const myButton = document.getElementById("mButton");

  //document.getElementById("taskList").innerHTML = userInput;
  myButton.addEventListener("click", function() {
    const li = document.createElement("li");
    li.createElement = '${taskInput.value} <button class="delete" onclick="deleteTask">Delete</button>';
    console.log("I m clicked");
  });
}

<script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <input type="text" id="taskInput" placeholder="Enter a task" />
  <button id="mButton" onclick="myFunction()">Add Task</button>
  <ul id="taskList"></ul>
</div>

• javascript
• html
• dom-events

• 2 Every time you click, you're calling addEventListener... so the more times you click it, the more event listeners you have. It's not clear to me what you're trying to do, but I doubt that you want to add an event listener for a button while executing an event listener for the same button... – Jon Skeet Commented 2 days ago
• You're adding an event listener to "myButton", but the id is "mButton". Plus, the event listener is supposed to run the code, but you are also adding an onclick event which is another way to respond to the click, and you have the event listener within that method. So it's a bit messy. Just use one or the other and put the code you want run in there. – Steve Commented 2 days ago
• That's not how you create a template literal. Use backticks `. Assigning a value to li.createElement isn't right either. It's not an error, it just doesn't do anything. – James Commented 2 days ago

2 Answers 2

The main issue in your code is that you call myFunction() when the button is clicked, but it itself defines another click event handler on that same button. You instead need to run your code when the page loads.

However there are other problems:

• Use backticks (`) to delimit an interpolated string
• Use innerHTML to set the HTML of an element, not createElement().
• Call append() on the target ul to add the li you created to it
• Use a single delegated event to handle 'Delete' button clicks to remove the child li elements.

Also, as an additional suggestion for better UX, wrap the input in a form element and change the event handler to listen for the submit event of that form. This way your new item will be added when the user clicks the button, but also when they press Return which is quicker and easier in most cases.

Here's a working example with those fixes applied:

const taskInput = document.querySelector("#taskInput");
const taskList = document.querySelector("#taskList");
const form = document.querySelector("#todo-form");

// Add task handler
form.addEventListener("submit", function(e) {
  e.preventDefault();
  const li = document.createElement("li");
  li.innerHTML = `${taskInput.value} <button class="delete">Delete</button>`;
  taskList.append(li);
  taskInput.value = '';
});

// Delete button handler
document.querySelector('.container').addEventListener('click', e => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('li').remove();
  }
});

<script src="script.js"></script>
<div class="container">
  <h3>To-Do List</h3>
  <form id="todo-form">
    <input type="text" id="taskInput" placeholder="Enter a task" />
    <button id="mButton">Add Task</button>
  </form>
  <ul id="taskList"></ul>
</div>

The <button> itself has an onclick attribute which means myFunction() gets called every time it is clicked. In myFunction, you are adding another event handler via myButton.addEventListener, but the original one is still there, so next time you click the button both myFunction() and the new handler function get called. The myFunction call then adds yet another event handler, and so on. You keep adding new event handlers and are never removing any of them.