Basado en la función onClick, quiero obtener datos para el usuario en particular. Lo que intenté crear una función getSelectedData y traté de llamar pasando datos actuales como argumento.
Pero recibió solo el último valor de la matriz.
function getSelectedData(receiveData){ console.log(receiveData) } var card = document.getElementById('mainBody') var x = "" for(var i = 0; i <= user.length -1; i++){ var UserData = user[i] x = x +` <div class="card m-2 d-flex flex-column align-items-center" onclick="getSelectedData(UserData)"> <img src="${user[i].userImage}" alt="" class="UserImage my-3"/> <p class="userName">${user[i].userName}</p> <p class="userCountry">${user[i].userCountry}</p> <p class="userProfession">${user[i].userProfession}</p> </div>` ; } card.innerHTML = xEn el momento en que se llama realmente a getSelectedData , el valor en UserData es el último valor que se le ha asignado.
Si en cambio hubieras usado
... onclick="getSelectedData(` + UserData + `)"... cada onclick tendría el valor de UserData en el momento en que estaba agregando a x .
ACTUALIZACIÓN: Como se señaló, UserData es un objeto. Dado que user no está definido en este código, presumiblemente estaría disponible para getSelectedData y, por lo tanto, se podría usar:
... onclick="getSelectedData(user[` + i + `])"...Está insertando un nuevo usuario, similar a este innerHTML. Esta es una forma inapropiada porque anula todo el contenido. Puede usar este "appendChild" como este "card.appendChild"
Su atributo onclick se activará, pero el argumento UserData no tendrá ningún valor a menos que lo coloque allí. Una solución, demostrada en mi fragmento de trabajo a continuación, es enviar el div mismo a la función usando la referencia this . En su función, extrae los valores que necesita recuperando la colección de elementos secundarios del div y leyendo los valores que colocó allí anteriormente.
const user = [ {userName: "John", userCountry: "France", userProfession: "musician", userImage: "001.png"}, {userName: "Jane", userCountry: "Germany", userProfession: "Teacher", userImage: "005.png"}, {userName: "Peter", userCountry: "Italy", userProfession: "Mechanic", userImage: "021.png"} ]; function processUser(element) { let user = element.children[1].innerHTML; console.log(`user is ${user}`); let country = element.children[2].innerHTML; let occupation = element.children[3].innerHTML; let image = element.children[0].src; console.log(`${user} lives in ${country}, their occupation is ${occupation}`); console.log(`${user}'s picture: ${image}`) } for(let i=0; i < user.length; i++){ let markup = ""; const div = document.createElement('div'); div.setAttribute("class", "card"); div.setAttribute("onclick", "processUser(this)"); markup += `<img src="${user[i].userImage}" alt="" class="UserImage my-3"></img>`; markup += `<p class="userName">${user[i].userName}</p>`; markup += `<p class="userCountry">${user[i].userCountry}</p>`; markup += `<p class="userProfession">${user[i].userProfession}</p>`; div.innerHTML = markup; document.body.appendChild(div); } body { background: yellow; } div { border: 1px solid red; padding: 10px; margin: 10px; background: white; } img { width:40px; height: 50px; background: red; border: 1px solid black; } <p>click any of the divs:</p> Eso funciona y logra lo que creo que quieres. Tal vez hubiera elegido un enfoque diferente si pudiera agregar ID numéricos a sus objetos de usuario en su matriz de datos al mismo valor que el índice para ese objeto de usuario, podría establecer el ID del div en el mismo (número) y simplemente envíe eso a su función usando (this.id) como argumento para el evento onlick. Esa ID se puede usar para leer su matriz de datos para el usuario relevante user[retrievedID].name etc.