在数组中添加输入值答案

【问题标题】：Add inputs values in array在数组中添加输入值
【发布时间】：2019-05-18 09:09:59
【问题描述】：

我创建了下一个代码：

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>

此代码应将每个输入的所有值添加到数组中，然后输出到屏幕上。我只得到输入的数量，但是如何从每个输入中获取值？

【问题讨论】：

console.log(arr.push(...)) 将返回数组的新长度——这是你想要的吗？

标签： javascript arrays loops

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：