I am currently trying to get an array to display a different element in my HTML with javascript after each time a button is clicked. I am using a for loop to represent the item in the array. I am having a lot of trouble getting any content to show up in the html at all. I am pretty new to this all so any help would be appreciated.
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 only be called when button click so you don't need to put this inside a for loop. Try to do the for when you click like this:
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>
`;
}
};
try to put +=
activityBox. innerHTML +=
<p>ACTIVITY: ${activitiesArray[i].activity}</p> <p>ENERGY NEEDED: ${activitiesArray[i].energy}</p> <p>MONEY NEEDED: ${activitiesArray[i].money}</p>;
Ideally the loop should run inside the onclick event listener function. Also its better to create element and then append it into the DOM elements.
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);
}