querySelectorAll循环“未定义”

Question

我尝试遍历几个输入元素以获取每个值，但由于某种原因我只得到最后一个：

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

控制台显示undefined，当我尝试输出值时，我只从最后一个元素而不是所有元素中获取它。我做错了什么？

非常感谢（请原谅我的英语）

Answer 1

您正在尝试获取元素本身的length：

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

元素没有长度。

我怀疑你是想要获得元素值的长度：

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

尝试console.log(element[i]);这是因为element将是DOM元素的集合。

这些元素没有长度属性。

由于它们是input，如果您想要获取value，则需要记录

element[i].value

Answer 3

  

我做错了什么？

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

element[i]指的是HTMLInputElement。它和它的父类没有length属性。假设您要显示input元素值的长度，以下内容将起作用。

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>