Problem with targeting created button with addEventListener-CodePudding

I'm learning vanilla JS and trying to make "To-do list" project. So, idea is simple adding values from form into the list. After that I add edit/remove buttons for every li in list and put the addEventListener to that buttons. For some reason, event listener is targeted on button from form. When I click on button to add new item in list, there is click listener that I want on edit button.

I try different ways to target the right button with parentNodes or childNodes, i find the pretty same code as mine but that don't work for me.

function newItem() {

    let input = document.getElementById("input").value;
    if (input != "") {
        let li = document.createElement("li");
        li.appendChild(document.createTextNode(input));

        let editButton = document.createElement("button");
        editButton.appendChild(document.createTextNode("Edit"));
        li.appendChild(editButton);
        editButton.addEventListener("click", console.log('a'));

        let ul = document.getElementById("list");
        ul.appendChild(li);
        document.getElementById("input").value = "";
    }

    function editItem() {
        alert('e');
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do!</title>
</head>
<body>
    <h1>To do list</h1>
<div>
    
    <input id = "input" type = "text" placeholder="What do you want to do?" value="">
    <button id = "enter" onclick = "newItem()">Ok</button> 
   
</div>
<p id="proba"></p>
<div>
    <ul id = "list">
      
    </ul>
</div>
<script type="text/javascript" src="todo.js"></script>
</body>
</html>

CodePudding user response：

You need to pass a function in addEventListener, not just code.

editButton.addEventListener("click", ()=>{console.log('a')});

Or pass it to editItem

editButton.addEventListener("click", editItem);

CodePudding user response：

You are calling console.log instead of passing it. and I believe you did the same with editItem. you called it instead of passing it. what you can do is below

 function newItem() {
    
        let input = document.getElementById("input").value;
        if (input != "") {
            let li = document.createElement("li");
            li.appendChild(document.createTextNode(input));
    
            let editButton = document.createElement("button");
            editButton.appendChild(document.createTextNode("Edit"));
            li.appendChild(editButton);
            editButton.addEventListener("click", editItem);
    
            let ul = document.getElementById("list");
            ul.appendChild(li);
            document.getElementById("input").value = "";
        }
    
        function editItem() {
            alert('e');
        }
    }

CodePudding user response：

addEventListener takes in a string and a callback function, by passing in console.log('a'), JavaScript is passing in the return value of the console.log, which is undefined. You instead need to wrap it in a function like this: editButton.addEventListener('click', () => { console.log('a'); }).