为什么这个Javascript For循环不显示单独的列表项?

Why is this Javascript For Loop not displaying individual list items?

本文关键字：单独 列表 显示 Javascript For 循环 为什么      更新时间：2023-09-26

我是新的Javascript，不能弄清楚为什么当这个for循环运行时，它只显示一个列表项目与数组的所有内容?

var items = [];
function additem() {
    var item = document.getElementById("item_to_add").value;
    items.push(item);
    console.log("Item " + item + " added!");
    for(i = 0; i < items.length; i++) {
        document.getElementById("items").innerHTML = "<li>" + items[i] + "</li>";
    }
}

我本以为它会像这样显示每个列表项:

  • 第1项
  • 项3

    • 而不是:

  • 第1项第2项第3项

    • 下面是HTML:

    <body>
    <h1>To Do List</h1>
    <label>Enter Item to Add: </label>
    <input type="text" id="item_to_add">
    <button onclick="additem()">Add Item</button>
    <div class="list">
        <ul id="items">
        </ul>
    </div>
<script src="javascript.js"></script>
</body>

    请先确认items是UL的HTML元素:

    var items = [], $ = function(id) { 
     return document.getElementById(id); 
};
function additem() {
    var item = $("item_to_add").value, html = '', i = 0;
    // Check duplicate before appending
    if (items.indexOf(item) !== -1) {
        return;
    }
    items.push(item);
    console.log("Item " + item + " added!");
    for(; i < items.length; i++) {
        html += "<li>" + items[i] + "</li>";
    }
    $("items").innerHTML = html;
 }

    这是因为在for循环的每次迭代中都替换了整个列表的内容。

    document.getElementById("items").innerHTML = "<li>" + items[i] + "</li>";

    需要替换为

    document.getElementById("items").innerHTML += "<li>" + items[i] + "</li>";

    您可以在每个循环迭代中添加换行符，例如:

    for(i = 0; i < items.length; i++) {
       document.getElementById("items").innerHTML = "<li>" + items[i] +     "</li>" + "<br>" ;
}
    相关文章：