Estoy aprendiendo Vanilla JS y tratando de hacer un proyecto de "Lista de tareas pendientes". Entonces, la idea es simplemente agregar valores del formulario a la lista. Después de eso, agrego botones de edición/eliminación para cada li en la lista y coloco addEventListener en esos botones. Por alguna razón, el detector de eventos está dirigido al botón del formulario. Cuando hago clic en el botón para agregar un nuevo elemento en la lista, hay un oyente de clic que quiero en el botón de edición.
Intento diferentes formas de apuntar al botón derecho con parentNodes o childNodes, encuentro el mismo código que el mío, pero eso no funciona para mí.
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>Deberá pasar una función a su método addEventListener como esta: editButton.addEventListener("click", editItem) .
Recuerda que no tienes que agregar el parámetro en el paréntesis de tu función.
También puede invocar una función anónima como esta y luego agregar su función al bloque derecho: 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>Debe pasar una función en addEventListener, no solo código.
editButton.addEventListener("click", ()=>{console.log('a')});O páselo a editItem
editButton.addEventListener("click", editItem);addEventListener toma una cadena y una función de devolución de llamada, al pasar console.log('a') , JavaScript pasa el valor de retorno de console.log , que no está definido. En su lugar, debe envolverlo en una función como esta: editButton.addEventListener('click', () => { console.log('a'); }) .