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>