Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

43
Views
Problem with targeting created button with addEventListener

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>

7 months ago · Juan Pablo Isaza
3 answers
Answer question

0

You will need to pass a function to your addEventListener method like this: editButton.addEventListener("click", editItem).

Remember that you don't have to add the parameter on the parenthesis of your function.

You can also invoke an anonymous function like this and then add your function to the right block: editButton.addEventListener("click", () => editItem()).

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

7 months ago · Juan Pablo Isaza Report

0

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);
7 months ago · Juan Pablo Isaza Report

0

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

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs