Cant get array to show up in HTML with for loop

Question

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

Your example doesn't make much sense. You assign activitiesArray.length times a function to the onclick property of the same button ( activityButton) — Andreas
– Andreas, Commented Nov 18, 2021 at 14:00
Change the commas in for (let i = 0, i < activitiesArray.length, i++) to ; — aerial
– aerial, Commented Nov 18, 2021 at 14:07

tdy · Accepted Answer · 2021-11-18 17:06:58Z

1

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

edited Nov 18, 2021 at 17:06

tdy

42.1k42 gold badges124 silver badges125 bronze badges

answered Nov 18, 2021 at 14:01

Ginés Ruiz

19312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Over a year ago

Fix the header of the loop or it won't do anything ;)

Noa Yarin Levi · Accepted Answer · 2021-11-18 14:00:00Z

0

try to put +=

activityBox. innerHTML += ACTIVITY: ${activitiesArray[i].activity} ENERGY NEEDED: ${activitiesArray[i].energy} MONEY NEEDED: ${activitiesArray[i].money};

answered Nov 18, 2021 at 14:00

Noa Yarin Levi

1911 silver badge10 bronze badges

Comments

subodhkalika · Accepted Answer · 2021-11-18 14:05:37Z

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

}

Jet Ezra · Accepted Answer · 2021-11-18 17:28:32Z

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.

Collectives™ on Stack Overflow

Cant get array to show up in HTML with for loop

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related