CODEWITHSUNDEEP
javascripthtml
user6247920
user6247920

Reputation:

querySelectorAll loop "undefined"

I try to loop over few input elements in order to get each value, but for some reason I only get the last one:

<input type="text" name="input-loop" data-loop="true" />
<input type="text" name="input-loop" data-loop="true" />
<input type="text" name="input-loop" data-loop="true" />
<button type="button" onclick="loop()">loop</button>
<div id="output"></div>
<script>
    function loop() {
        var element = document.querySelectorAll('[data-loop="true"]');
        for(var i = 0; i < element.length; i++) {
            console.log(element[i].length);
            // or:
            // document.getElementById('output').innerHTML = element[i].value + '<br>';
        }
    }
</script>

The console shows undefined and when I try to output the values, I only get it from the last element and not from all of them. What am I doing wrong?

Thank you very much (and please excuse my english)

Upvotes: 1

Views: 1699

Answers (3)

skav
skav

Reputation: 1460

What am I doing wrong?

console.log(element[i].length);

element[i] refers to an HTMLInputElement. It and non of its parent classes have a length property. Assuming you want to display the length of the value of the input element, the following would work.

var output = document.getElementById('output');

function loop() {
  var element = document.querySelectorAll('[data-loop="true"]');
  element.forEach( (e) => {
    output.innerHTML += `${e.value}: ${e.value.length}<br>`;
  });
}


function clearOutput(){
  output.innerHTML = '';
}
<input type="text" name="input-loop" data-loop="true" value="one" />
<input type="text" name="input-loop" data-loop="true" value="two" />
<input type="text" name="input-loop" data-loop="true" value="three" />

<button type="button" onclick="loop()">loop</button>
<button type="button" onclick="clearOutput()">clear</button>

<div id="output"></div>

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

You are trying to get the length of the element itself:

console.log(element[i].length);

Elements don't have a length.

I suspect you are trying to get the length of the value of the elements:

console.log(element[i].value.length);


function loop() {
  
        // elements will be a "node list" containing any/all elements
        // that match the query.
        var elements = document.querySelectorAll('[data-loop="true"]');
      
        // Because it is a node list, which is an array-like object,
        // it has a "length" property:
        console.log("There were " + elements.length + " elements found.");
      
        // ...And, it can be looped through
        for(var i = 0; i < elements.length; i++) {
            // It's contained elements are indexed and when you do that,
            // you may access properties of the elements themselves
            console.log(elements[i].value);
            // or:
            document.getElementById('output').innerHTML += elements[i].value + '<br>';
        }
    }
<p>Type some text in the textboxes and then click the button:</p>
<input type="text" name="input-loop" data-loop="true" />
<input type="text" name="input-loop" data-loop="true" />
<input type="text" name="input-loop" data-loop="true" />
<button type="button" onclick="loop()">loop</button>
<div id="output"></div>

Upvotes: 3

brk
brk

Reputation: 50346

try to console.log(element[i]); This is because here element will be a collection of DOM elements.

There is no length property for these elements.

Since they are input and if you want to get their value you need to log

element[i].value

Upvotes: 0

Related Questions