将输入值添加到数组中

Question

我创建了下面的代码:

var b = document.getElementById("btn");
b.addEventListener('click', function () {
 var a  = document.createElement("input");
 document.getElementById('container').appendChild(a);
});
var c  = document.getElementById('btn2');
c.addEventListener('click',function () {
  document.querySelector("input").remove();
});
var d  = document.getElementById('btn3');
d.addEventListener('click', function () {
 var arr = [];
 var items = document.querySelectorAll('input');
 for (var i = 0; i<items.length; i++) {
  console.log(arr.push(items.value))
 }
});

h1{
    text-align: center;
}
#container input{
    margin-bottom: 20px;
    border: 2px solid blue;
}
#container input:nth-of-type(odd) {
    border: 2px solid red;
}
#container{
    width: 25%;
    margin: auto;

}
button{
    display: block;
    border: 1px solid black;
    background-color: white;
    padding: 15px;
    color: black;
}

<h1>To do list</h1>
<div id="container" style="display: flex; flex-direction: column">
</div>
<button style="margin: auto" id="btn">push</button>
<button style="margin: auto" id="btn2">delete</button>
<button style="margin: auto" id="btn3">add</button>

这段代码应该将数组中每个输入的值相加并输出到屏幕上。我只得到了输入的数量，但是如何获取每个输入的值呢？

- user10201522

---

console.log(arr.push(...)) 会返回数组的新长度 - 这是你想要的吗？ - Jack Bashford

Answer 1

您可以使用展开运算符 (...)、.map 函数和箭头 (=>) 函数来实现更优化的语法，使代码更有效和易读：

最初的回答：

var arr = [...document.querySelectorAll('input')].map(elem => elem.value);

var b = document.getElementById("btn");
b.addEventListener('click', function () {
    var a  = document.createElement("input");
    document.getElementById('container').appendChild(a);
});

var c  = document.getElementById('btn2');
c.addEventListener('click', function () {
    document.querySelector("input").remove();
});

var d  = document.getElementById('btn3');
d.addEventListener('click', function () {
    var arr = [...document.querySelectorAll('input')].map(elem => elem.value);
    console.log(arr);
});

h1{
    text-align: center;
}
#container input{
    margin-bottom: 20px;
    border: 2px solid blue;
}
#container input:nth-of-type(odd) {
    border: 2px solid red;
}
#container{
    width: 25%;
    margin: auto;

}
button{
    display: block;
    border: 1px solid black;
    background-color: white;
    padding: 15px;
    color: black;
}

<h1>To do list</h1>
<div id="container" style="display: flex; flex-direction: column">
</div>
<button style="margin: auto" id="btn">push</button>
<button style="margin: auto" id="btn2">delete</button>
<button style="margin: auto" id="btn3">add</button>

- Banzay

Answer 2

push() 方法返回数组的长度，您正在打印它。在向数组推送元素后，您需要记录数组。

push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

for (var i = 0; i<items.length; i++) {
  arr.push(items.value)
 }
console.log(arr)

- Vikas