通过Array的For循环只显示最后一个值

For loop through Array only shows last value

本文关键字：显示 最后一个 循环 Array For 通过      更新时间：2023-09-26

我试图通过数组循环，然后使用innerHTML为数组中的每个条目创建一个新的

  • 元素。不知何故，我的代码只显示了数组的最后一个值。我已经在这上面呆了几个小时了，似乎不知道我做错了什么。
    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 />";
    }
}

    我有一个UL与id 'list'在我的HTML。

    • 更改for循环:

    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 />";
}

    用+=代替=。除此之外，您的代码看起来很好。

    我建议您首先创建一个div元素。在那里你添加你的innerHTML，然后你可以做appendchild。

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

    }

    相关文章：