Добавить входные значения в массив

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

push() метод возвращает длину массива, и вы его печатаете.После добавления элементов в него необходимо зарегистрировать массив.

Метод push () добавляет один или несколько элементов в конец массива и возвращает новую длину массива.

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

Answer 3

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>