在数组中添加输入值

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>

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

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>

Answer 2

arr.push将返回arr的长度，您必须在推送后打印该值。同样在循环中，您需要使用items[i]

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++) {
  arr.push(items[i].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>

Answer 3

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

  

push（）方法将一个或多个元素添加到数组的末尾，然后   返回数组的新长度。

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