Question

我在Javascript中遇到数组问题。我有一个按钮将项目推送到数组。单击按钮后，不会执行用于显示div中项目列表的for循环。

以下是代码：

HTML：

<input type="text" id="tb">
<button id="btn">Submit</button>
<div id="list"></div>

使用Javascript：

var list = [];

btn.onclick = function(){
    list.push(document.getElementById("tb").value);
}

for (var i in list){
    document.getElementById("list").innerHTML = "<p>"+list[i]+"</p>"
}

是否有任何解决方案，以便在我点击按钮后，div更新项目列表，就像待办事项列表一样？

Answer 1

当点击按钮时，您可以将追加 html到列表中 - 请参阅下面的演示：

＆＃13;
＆＃13;
btn.onclick = function() { document.getElementById("list").innerHTML += "<p>" + document.getElementById("tb").value + "</p>" }
＆＃13;
<input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div>
＆＃13;
＆＃13;
＆＃13;

如果您希望将数组用作数据存储，就像您在此答案的评论中所说的那样，您可以执行以下代码段中给出的内容：

＆＃13;
＆＃13;
var list = []; btn.onclick = function() { // add to the list list.push(document.getElementById("tb").value); // TODO: save to local storage if needed // reset the list document.getElementById("list").innerHTML = ''; // display the list for (var i in list) { document.getElementById("list").innerHTML += "<p>" + list[i] + "</p>"; } }
＆＃13;
<input type="text" id="tb"> <button id="btn">Submit</button> <div id="list"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我做：

var list = [];

btn.onclick = function(){
    list.push(document.getElementById("tb").value);
    for (var i in list){
        document.getElementById("list").innerHTML = "<p>"+list[i]+"</p>"
    }
}

正如您所看到的，必须在执行中触发for循环，因此我将其移动到函数

中

Answer 3

只需将新的<p>元素添加到列表中，而不是使用innerHTML。此外，您应该使用addEventListener绑定事件侦听器：

＆＃13;

var list = document.getElementById('list');
var input = document.getElementById('tb');

document.getElementById('btn').addEventListener('click', function () {
  var p = document.createElement('p');
  p.textContent = input.value;
  list.appendChild(p);
});

＆＃13;

<input type="text" id="tb">
<button id="btn">Submit</button>
<div id="list"></div>

＆＃13;

Answer 4

var list = [];
var btn = document.getElementById("btn");

btn.onclick = function(){
    var tb = document.getElementById("tb").value;
    //list.push(tb);
    document.getElementById("list").innerHTML += "<p>"+tb+"</p>"
}

<input type="text" id="tb">
<button id="btn">Submit</button>
<div id="list"></div>

如何将项插入数组并在JavaScript

4 个答案: