Quiero mostrar y hacer clic en objetos en una lista html en mi página web. La creación de la lista html que incluye los valores del objeto (nombre) funciona bien, también el evento de clic. Pero no puedo obtener el valor del objeto en el que se hizo clic (por ejemplo, el nombre). El resultado:
(e.target.id) está ''(vacío).
//Array of objects let tierArray = { "name": data.Name, "geburtstag": data.Geburtstag, "geschlecht": data.Geschlecht, "idNummer": data["ID Nummer"], "imageIndexPath": data["Image Index Path"], "information": data.Information, "rasse": data.Rasse, "tierart": data.Tierart, "imTierheimSeit": data["im Tierheim seit"] } listOfTierObjects.push(tierArray); //this works for (let i = 0; i < listOfTierObjects.length; i++) { let row = `${listOfTierObjects[i].name}`; document.getElementById("tiereList").innerHTML += '<li>' + row + '</li>'; }; //The problem is here document.getElementById("tiereList").onclick = function(e) { console.log(e.target.id); }No está poniendo ninguna id en li , por lo que e.target.id es "" .
No ha dicho qué valor desea poner allí, pero, por ejemplo, podría poner el índice allí si quisiera:
document.getElementById("tiereList").innerHTML += '<li id="' + index + '">' + row + '</li>'; ... aunque creo que usaría un atributo data-* en su lugar.
(Nota: alguien podría decirle que id="1" [por ejemplo] no es válido, pero ese es un mito común. Una id puede ser cualquier cosa que desee siempre que sea única y no tenga espacios en blanco. El mito proviene del hecho de que un selector de ID de CSS no puede comenzar con un dígito sin escape. Pero, de nuevo, no usaría id para esto [¿qué pasa si haces esto en dos lugares?]. Yo usaría ...data-index="' + index + '"... y getAttribute("data-index"0 en su lugar).
Un par de notas al margen:
+= en innerHTML no es la mejor práctica. Construya la cadena completa en una variable y realice una sola asignación a innerHTML , o use insertAdjacentHTML , o use createElement en su lugar.getElementById es muy rápido, si lo va a usar en un ciclo para el mismo elemento, probablemente sea más claro agarrarlo a una variable y reutilizar la variable.let row = `${listOfTierObjects[i].name}`; cuando listOfTierObjects[i].name es una cadena, se puede escribir más simplemente let row = listOfTierObjects[i].name; ..onclick , sugeriría usar addEventListener .li , no funcionaría de manera confiable. En su lugar, utilice const li = e.target.closest("li"); para obtener de manera confiable el elemento li , incluso si el clic está en un elemento secundario dentro de li .Más: