Add inputs values in array

Question

I created the next code:

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>

This code should add all values from each input in array and output then on the screen. I get only the number of inputs, but how to get the values from each input?

console.log(arr.push(...)) will return the new length of the array- is that what you want? — Jack Bashford
– Jack Bashford, Commented May 18, 2019 at 9:13

Banzay · Accepted Answer · 2019-05-18 09:42:55Z

You can implement more optimal syntax, using spread (...) operator, .map function and arrow (=>) function to make the code more effective and readable:

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>

Vikas · Accepted Answer · 2019-05-18 09:16:28Z

0

push() method returns length of array and you are printing it. You need to log array after pushing elements to it.

The push() method adds one or more elements to the end of an array and returns the new length of the array.

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

answered May 18, 2019 at 9:16

Vikas

7,2214 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Add inputs values in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related