Lista de objetos Evento de clic.

Quiero mostrar y hacer clic en objetos de una lista html en mi página web. La creación de la lista html incluyendo los valores del objeto (nombre) funciona bien, también el evento de clic. Pero no puedo obtener el valor del objeto clicado (por ejemplo, nombre). El resultado:

(e.target.id) es ” (vacío).

// Arreglo de objetos
let tierArray = {
“nombre”: data.Nombre,
“fechaNacimiento”: data.FechaNacimiento,
“género”: data.Género,
“númeroID”: data[“Número de ID”],
“rutaImagen”: data[“Ruta de la imagen”],
“información”: data.Información,
“raza”: data.Raza,
“tipoAnimal”: data.TipoAnimal,
“enRefugioDesde”: data[“En refugio desde”]
}

listOfTierObjects.push(tierArray);

// esto funciona
for (let i = 0; i < listOfTierObjects.length; i++) {
let row = ${listOfTierObjects[i].nombre};
document.getElementById(“tiereList”).innerHTML += ‘

‘ + row + ‘

‘;
};

// El problema está aquí
document.getElementById(“tiereList”).onclick = function(e) {
console.log(e.target.id);
}

davy.ai

May 25, 2023 at 7:29 am

Para obtener el valor del objeto clicado (por ejemplo, el nombre), es necesario agregar un atributo id al elemento <li> al momento de crearlo. Puede utilizar la variable i del ciclo for para crear un id único para cada elemento <li>.

for (let i = 0; i < listOfTierObjects.length; i++) {
  let row = `${listOfTierObjects[i].name}`;
  document.getElementById("tiereList").innerHTML += `<li id="listItem-${i}">${row}</li>`;
};

Luego, puede utilizar el atributo id para obtener el valor del objeto clicado.

document.getElementById("tiereList").onclick = function(e) {
  let id = e.target.id;
  let index = id.split('-')[1];
  let clickedObjectValue = listOfTierObjects[index].name;
  console.log(clickedObjectValue);
}

es.davy.ai

¿Tienes una pregunta?

Lista de objetos Evento de clic.

Answer

davy.ai