For loop through Array only shows last value

Question

I'm trying to loop through an Array which then uses innerHTML to create a new

element for every entry in the array. Somehow my code is only showing the last value from the array. I've been stuck on this for a few hours and can't seem to figure out what I'm doing wrong.

window.onload = function() {

// Read value from storage, or empty array
var names = JSON.parse(localStorage.getItem('locname') || "[]");
var i = 0;

    n = (names.length);
    for (i = 0; i <= (n-1); i++) {
        var list = names[i];
        var myList = document.getElementById("list");
        myList.innerHTML = "<li class='list-group-item' id='listItem'>"+ list + "</li>" + "<br />";
    }
}

I have a UL with the id 'list' in my HTML.

chris97ong · Accepted Answer · 2014-06-13 12:03:32Z

9

Change your for loop:

for (i = 0; i <= (n-1); i++) {
    var list = names[i];
    var myList = document.getElementById("list");
    myList.innerHTML += "<li class='list-group-item' id='listItem'>"+ list + "</li>" + "<br />";
}

Use += instead of =. Other than that, your code looks fine.

answered Jun 13, 2014 at 12:03

chris97ong

7,0809 gold badges36 silver badges54 bronze badges

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

1 Comment

Ivar Over a year ago

Note that += on .innerHTML is not optimal. Prefer myList.insertAdjacentHTML('beforeend', htmlToAppend)

Tauhidul Khandaker · Accepted Answer · 2022-01-11 10:29:52Z

0

I suggest you to first make a div by create element. there you add your innerHTML and after that you can do the appendchild. That will work perfectly for this type of scenario.

function displayCountries(countries) {
const countriesDiv = document.getElementById('countriesDiv');
countries.forEach(country => {
    console.log(country.borders);
    const div = document.createElement('div');
    div.classList.add('countryStyle');
    div.innerHTML = `
    <h1> Name : ${country.name.official} </h1>
    <h2> Capital : ${country.capital} </h2>
    <h3> Borders : ${country.borders} </h3>
    <img src="${country.flags.png}">
    `;
    countriesDiv.appendChild(div);
});

}

answered Jan 11, 2022 at 10:29

Tauhidul Khandaker

16

Collectives™ on Stack Overflow

For loop through Array only shows last value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related