querySelectorAll循环“未定义”
querySelectorAll loop "undefined"
我尝试遍历几个输入元素,以获得每个值,但由于某种原因,我只得到最后一个:
<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
,当我尝试输出值时,我只从最后一个元素获得它,而不是从所有元素中获得它。我做错了什么?
非常感谢(请原谅我的英语)
您正在尝试获取元素本身的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>
尝试console.log(element[i])
;这是因为这里的element
将是DOM元素的集合。
这些元素没有长度属性。
因为他们是input
,如果你想获得他们的value
,你需要记录
element[i].value
我做错了什么?
console.log(element[i].length);
element[i]
引用了一个htmlputelement。它和它的父类都有一个length
属性。假设您想要显示输入元素值的长度,下面的代码可以工作:
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>
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- 使用arr[i]循环遍历数组==未定义
- 为什么在循环中返回时函数返回值未定义
- 未捕获的类型错误:未定义不是函数,在中为循环创建了对象
- Waypoint的循环,退出循环后属性未定义
- 对象在循环中运行时未定义,但在按顺序执行时未定义
- 使用while循环在printArray函数中获取一个额外的未定义值
- 如何使此循环工作?它's返回未定义的语言js
- Javascript数组中未定义的值是否使用任何内存或在for in循环中迭代
- 未捕获的typeerror无法读取属性'0'for循环中未定义的
- 使用jQuery'在数组中循环;s中的每一个都会在生成字符串时在开头产生一个未定义的值
- 嵌套的“for”循环 - 数组未定义
- 在 For 循环中的闭包中未定义
- javascript 中的框架对象循环是未定义的
- 为什么以下 forEach 数组循环未返回未定义
- 当在 Javascript 中使用许多 for 循环时,输出是未定义的
- 用于从许多带有“for”循环的URL中获取HTML信息的X射线使对象未定义
- 当我把它放到setInterval循环中时,event.clientY是未定义的
- 除非调用console.log,否则未定义循环引用父子关系