如何避免在JavaScript中的“ for循环”内出现“未定义”？
[英]how to avoid “undefined” inside a “for-loop” in javascript?
问题描述
我使用for循环更改了innerHTML，但是由于没有相同数量的实例，所以某些值返回的是未定义的。 如何设置循环以跳过空实例？
这是为了更改同一类的所有实例的内容，实例的数量因类而异。
<!DOCTYPE html>
<html>
<body>
<p class="TEXT1">000</p>
<p class="TEXT1">000</p>
<p class="TEXT2">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT3">000</p>
<p class="TEXT4">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<p class="TEXT5">000</p>
<script>
function CHANGE() {
for (var i = 0; i < 10; i++) {
//"paragraphs" will be different content texts, not just the word with a number.
document.getElementsByClassName("TEXT1")[i].innerHTML = "Paragraph 1";
document.getElementsByClassName("TEXT2")[i].innerHTML = "Paragraph 2";
document.getElementsByClassName("TEXT3")[i].innerHTML = "Paragraph 3";
document.getElementsByClassName("TEXT4")[i].innerHTML = "Paragraph 4";
document.getElementsByClassName("TEXT5")[i].innerHTML = "Paragraph 5";
}
}
CHANGE();
</script>
</body>
</html>
预期结果是：
第1段
第1段
第2段
第3段
第3段
第3段
第4段
第5段
第5段
第5段
第5段
我得到的实际结果是：
第1段
第1段
第2段
第3段
000
000
第4段
第5段
000
000
000
Javascript控制台：
未捕获的TypeError：无法设置未定义的属性“ innerHTML”
6 个解决方案
解决方案1
0 已采纳 2019-08-22 18:09:37
实例的数量因类而异。
您可以检查实例数。
for (var el of document.getElementsByClassName("TEXT1"))
el.innerHTML = "Paragraph 1";
对于多个班级和课文：
let change = (cls, text) => {
for (var el of document.getElementsByClassName(cls))
el.innerHTML = text;
};
change('text1', 'paragraph 1');
change('text2', 'paragraph 2');
...
解决方案2
0 2019-08-22 18:10:26
在您的for循环中检查这种情况
for(// your loop condition){
myVar = document.getElementsByClassName("TEXT")[i];
if (typeof myVar !== 'undefined'){
continue;
}
}
解决方案3
0 2019-08-22 18:15:15
您应该改为从classNames开始并搜索匹配的元素。 一旦有了这些，就可以对其进行操作
function CHANGE() {
// define the classnames for TEXT1, TEXT2, ... TEXT6
for(let i=1;i<=6;i++){
let className = "TEXT"+i
// pickup the child elements with the matching class
let nodes = document.getElementsByClassName(className)
// change the text
for(let j=0; j<nodes.length;j++){
nodes[j].innerHTML="Paragraph "+i
}
}
}
或者，如果您只是想从类名列表中工作，则可以说
function CHANGE() {
const classNames = ['TEXT1','TEXT2','TEXT3','TEXT4','TEXT5','TEXT6']
classNames.forEach(name=>{
let nodes = document.getElementsByClassName(name)
let innerText = "Paragraph "+name.replace("TEXT","")
for(let j=0; j<nodes.length;j++){
nodes[j].innerHTML=innerText
}
})
}
解决方案4
0 2019-08-22 18:15:20
您不应该试图在一个循环中更改所有不同类别的元素，也不应该对循环的长度进行硬编码或在每个循环中重新计算元素列表。 尝试这个：
var text1Elements = document.getElementsByClassName("TEXT1");
for (var i = 0; i < test1Elements.length; i++) {
text1Elements[i].innerHTML = "Paragraph 1";
}
然后针对要操作的每个不同类别的元素重复该操作。 或者，为所有这些元素提供一个额外的通用类，然后使用正则表达式确定数字，从而找到并遍历结果。 我将使用ES6语法包含此示例，因为它反而更加复杂：
// Each element has the 'paragraph' class; for instance, class="TEXT1 paragraph", class="TEXT2 paragraph", etc.
const elements = document.querySelectorAll('.paragraph');
for (let element of elements) {
const matcher = element.className.match(/^TEXT(\d+)/i);
element.innerHTML = `Paragraph ${matcher[1]}`;
}
解决方案5
0 2019-08-22 18:17:30
每次调用document.getElementsByClassName时，您都在强制DOM查找和收集那些元素。 这会使网站速度变慢。 尝试这样的事情：
for (var i=1; i < 6; i++) {
var elements = document.getElementsByClassName("TEXT" + i);
for (var element of elements) {
element.innerHTML = "Paragraph " + i;
}
}
解决方案6
0 2019-08-22 18:23:05
您正在尝试遍历不存在的索引，请尝试以下代码段：
function change() { var classes = ['TEXT1', 'TEXT2', 'TEXT3', 'TEXT4', 'TEXT5']; var paragraphs = ['Paragraph 1', 'Paragraph 2', 'Paragraph 3', 'Paragraph 4', 'Paragraph 5', ]; for (var i = 0; i < classes.length; i++) { var elements = document.getElementsByClassName(classes[i]); for (var j = 0; j < elements.length; j++) { elements[j].innerHTML = paragraphs[i]; } } } window.onload = function() { change(); }
<!DOCTYPE html> <html> <body> <p class="TEXT1">000</p> <p class="TEXT1">000</p> <p class="TEXT2">000</p> <p class="TEXT3">000</p> <p class="TEXT3">000</p> <p class="TEXT3">000</p> <p class="TEXT4">000</p> <p class="TEXT5">000</p> <p class="TEXT5">000</p> <p class="TEXT5">000</p> <p class="TEXT5">000</p> </body> </html>
Javascript Function 在 for 循环第一次运行后返回 undefined
[英]Javascript Function returns undefined after for-loop runs the first time
javascript for循环多维数组“无法读取未定义的属性长度”
[英]javascript for-loop multidimensional array “cannot read property length of undefined”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.