CODEWITHSUNDEEP
javascript
lydia
lydia

Reputation: 1

Cant get array to show up in HTML with for loop

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>
             `;
    };
}

Upvotes: 0

Views: 58

Answers (4)

Jet Ezra
Jet Ezra

Reputation: 174

With our cool ES6 functionalities, I can reduce your code to something like this.

//maintain your declarations
const activityButton = document.getElementById("activityButton");
const activityBox = document.getElementById("activitiesBox");

//also maintaining your activitiesArray

//foreach that takes up an anonymous function
//grab the html you want to insert into your content.
var my_html = activityBox.innerHTML
activitiesArray.forEach(el=>{
   let new_html=`
            <p>ACTIVITY: ${el.activity}</p>
            <p>ENERGY NEEDED: ${ael.energy}</p>
            <p>MONEY NEEDED: ${el.money}</p>
            `;
      my_html.append(new_html)
})

There you go, shorter and precise, the code is based from yours, so I hope you will will clearly follow along.

Upvotes: 0

Gin&#233;s Ruiz
Gin&#233;s Ruiz

Reputation: 183

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>
            `;
    }
};

Upvotes: 1

subodhkalika
subodhkalika

Reputation: 2237

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);

}

Upvotes: 0

Noa Yarin Levi
Noa Yarin Levi

Reputation: 191

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>;

Upvotes: 0

Related Questions