querySelectorAll loop „undefined“

Question

Ich versuche, über einige Eingabeelemente, um eine Schleife um jeden Wert zu bekommen, aber aus irgendeinem Grund bekomme ich nur die letzte:

<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> 

Die Konsole zeigt undefined und wenn ich versuche, gib die Werte aus, ich bekomme sie nur vom letzten Element und nicht von allen. Was mache ich falsch?

Vielen Dank (und bitte mein Englisch entschuldigen)

Answer 1

Sie versuchen die length des Elements zu erhalten selbst:

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

Elemente haben keine Länge.

Ich vermute, dass Sie versuchen, die Länge des Wertes der Elemente zu erhalten:

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>

Answer 2

zu console.log(element[i]) versuchen; Dies liegt daran, dass element eine Sammlung von DOM-Elementen ist.

Für diese Elemente gibt es keine Längeneigenschaft.

Da sie input und wenn Sie ihre value erhalten wollen, müssen Sie

element[i].value 

Answer 3

Was anmelden mache ich falsch?

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

element[i] bezieht sich auf eine HTMLInputElement. Es und nicht von seinen Elternklassen haben eine length Eigenschaft. Angenommen, Sie möchten die Länge des Werts des Eingabeelements anzeigen, würde Folgendes funktionieren.

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>