Undefined result in Console by Input to Array Fields

Question

Why when I pus the Submit button is undefined all of them?

I want to create an array just by using input fields like this.

Is there a nother way to do this?

I tried to do it with Class name and the result is still undefined

function clicked() {
    var input_value = document.querySelectorAll('#data, #data1, #data2, #data3, #data4').value;
    console.log(input_value)
}

document.getElementById('btn').addEventListener('click', clicked);

<input id="data">
<input id="data1">
<input id="data2">
<input id="data3">
<input id="data4">
<button id="btn">Click me</button>

bobbyz · Accepted Answer · 2017-10-31 19:13:40Z

3

querySelectorAll will return a "NodeList", which is similar to an array. NodeLists don't have a value property, so it's returning undefined.

If you want to get the value from each of the input boxes, you'll need to loop through the NodeList and pull the value from each HTML element individually.

function clicked() {
    var nodeList = document.querySelectorAll('#data, #data1, #data2, #data3, #data4');
    for (var i = 0; i < nodeList.length; i++) {
      console.log(nodeList[i].value);
    }
}

document.getElementById('btn').addEventListener('click', clicked);

edited Oct 31, 2017 at 19:13

answered Oct 31, 2017 at 19:05

bobbyz

5,0865 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrei CCL Over a year ago

I want it to return a pure array in console

anomaaly · Accepted Answer · 2017-10-31 19:09:19Z

0

Change fn to this:

function clicked() {
  var inputs= document.querySelectorAll('#data, #data1, #data2, #data3, #data4');
  inputs.forEach(i => {
    console.log(i.value);
  });
}

answered Oct 31, 2017 at 19:09

anomaaly

8414 silver badges15 bronze badges

Collectives™ on Stack Overflow

Undefined result in Console by Input to Array Fields

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related