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.
JavaScript
x
21
21
1
function newItem() {2
3
let input = document.getElementById("input").value;4
if (input != "") {5
let li = document.createElement("li");6
li.appendChild(document.createTextNode(input));7
8
let editButton = document.createElement("button");9
editButton.appendChild(document.createTextNode("Edit"));10
li.appendChild(editButton);11
editButton.addEventListener("click", console.log('a'));12
13
let ul = document.getElementById("list");14
ul.appendChild(li);15
document.getElementById("input").value = "";16
}17
18
function editItem() {19
alert('e');20
}21
}JavaScript
1
25
25
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>To Do!</title>8
</head>9
<body>10
<h1>To do list</h1>11
<div>12
13
<input id = "input" type = "text" placeholder="What do you want to do?" value="">14
<button id = "enter" onclick = "newItem()">Ok</button> 15
16
</div>17
<p id="proba"></p>18
<div>19
<ul id = "list">20
21
</ul>22
</div>23
<script type="text/javascript" src="todo.js"></script>24
</body>25
</html>Advertisement
Answer
You need to pass a function in addEventListener, not just code.
JavaScript
1
2
1
editButton.addEventListener("click", ()=>{console.log('a')});2
Or pass it to editItem
JavaScript
1
2
1
editButton.addEventListener("click", editItem);2