javascript - querySelectorAll loop "undefined" -

i try loop on few input elements in order each value, reason 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 = 0; < element.length; i++) {             console.log(element[i].length);             // or:             // document.getelementbyid('output').innerhtml = element[i].value + '<br>';         }     } </script> 

the console shows undefined , when try output values, last element , not of them. doing wrong?

thank (and please excuse english)

you trying length of element itself:

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

elements don't have length.

i suspect trying length of value of elements:

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

function loop() {              // elements "node list" containing any/all elements          // match query.          var elements = document.queryselectorall('[data-loop="true"]');                  // because node list, array-like object,          // has "length" property:          console.log("there " + elements.length + " elements found.");                  // ...and, can looped through          for(var = 0; < elements.length; i++) {              // it's contained elements indexed , when that,              // may access properties of elements              console.log(elements[i].value);              // or:              document.getelementbyid('output').innerhtml += elements[i].value + '<br>';          }      }

<p>type text in textboxes , click 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>