Actualmente estoy tratando de obtener una matriz para mostrar un elemento diferente en mi HTML con javascript después de cada vez que se hace clic en un botón. Estoy usando un bucle for para representar el elemento en la matriz. Tengo muchos problemas para que el contenido aparezca en el html. Soy bastante nuevo en todo esto, por lo que agradecería cualquier ayuda.
const activityButton = document.getElementById("activityButton"); const activityBox = document.getElementById("activitiesBox"); for (let i = 0, i < activitiesArray.length, i++) { activityButton.onclick = function(){ activityBox. innerHTML = ` <p>ACTIVITY: ${activitiesArray[i].activity}</p> <p>ENERGY NEEDED: ${activitiesArray[i].energy}</p> <p>MONEY NEEDED: ${activitiesArray[i].money}</p> `; }; }onclick solo se llama cuando se hace clic en el botón, por lo que no necesita poner esto dentro de un bucle for . Intenta hacer el for cuando hagas clic así:
const activityButton = document.getElementById("activityButton"); const activityBox = document.getElementById("activitiesBox"); activityButton.onclick = function(){ for (let i = 0; i < activitiesArray.length; i++) { activityBox.innerHTML += ` <p>ACTIVITY: ${activitiesArray[i].activity}</p> <p>ENERGY NEEDED: ${activitiesArray[i].energy}</p> <p>MONEY NEEDED: ${activitiesArray[i].money}</p> `; } };intenta poner +=
cuadro de actividad. innerHTML += <p>ACTIVITY: ${activitiesArray[i].activity}</p> <p>ENERGY NEEDED: ${activitiesArray[i].energy}</p> <p>MONEY NEEDED: ${activitiesArray[i].money}</p> ;
Idealmente, el bucle debería ejecutarse dentro de la función de escucha de eventos onclick. También es mejor crear un elemento y luego agregarlo a los elementos DOM.
const activityButton = document.getElementById("activityButton"); activityButton.onclick = function(){ const activityBox = document.getElementById("activitiesBox"); activityBox.innerHTML = ""; for (let i = 0, i < activitiesArray.length, i++) { var p1 = document.createElement("p"); p1.innerHTML = ACTIVITY: ${activitiesArray[i].activity}; var p2 = document.createElement("p"); p2.innerHTML = ENERGY NEEDED: ${activitiesArray[i].energy} var p3 = document.createElement("p"); p3.innerHTML = MONEY NEEDED: ${activitiesArray[i].money} activityBox.append(p1); activityBox.append(p2); activityBox.append(p3); }