Creé algunos elementos html (span) dentro de javascript con la ayuda de document.createElement , pero no puedo agregar un detector de eventos. Cuando intento recuperar esos elementos a través de document.getElementByName("span") , devuelve una lista de nodos vacía. Supongo que los elementos no están disponibles cuando se cargan inicialmente, ya que los creo más tarde. ¿Cómo puedo recuperarlos y agregar un detector de eventos?
guión.js
const items = ["Candles", "Decorations", "Chocolate"] const checklist = document.getElementById("checklist") const input = document.getElementById("newele"); function newElement(value){ let div = document.createElement("div"); let p = document.createElement("p"); let span = document.createElement("span"); p.innerText = value; let i = document.createElement("i"); i.classList.add("fas", "fa-times"); span.appendChild(i); div.classList.add("checklist-item"); div.appendChild(p); div.appendChild(span); return div; } items.forEach((item) => { let p = newElement(item); checklist.appendChild(p); }); let icon = document.getElementsByName("span"); console.log(icon);índice.js
<html> <head> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous" /> </head> <body> <h1>Christmas Shopping List</h1> <div> <label for="newele">Add new item</label> <input type="text" id="newele"></input> </div> <div class="checklist" id="checklist"></div> <script src="index.pack.js"></script> </body> </html>como ya se ha señalado correctamente, un pequeño error. Pero podría ser más interesante usar una función de selector diferente. Si selecciona a través del nombre de la etiqueta, obtiene una colección. Eso significa que aún tiene que trabajar con una clave para abordar el elemento correcto. si solo tiene un elemento de intervalo, entonces sería [0]. Pero mi método favorito sería querySelector. Fíjate en este pequeño ejemplo:
const span1 = document.getElementsByTagName('span'); console.log(span1[0]); const span2 = document.querySelector('span'); console.log(span2) <span>hello</span>El problema se debe al método de selección que ha utilizado. Debe utilizar getElementsByTagName("span"); en lugar de document.getElementsByName("span");