Javascript 中 For 循环的正确代码？

Posted 2023-02-21

【中文标题】Javascript 中 For 循环的正确代码？

【英文标题】：Proper code for a For Loop in Javascript?

【发布时间】：2014-04-12 00:03:07

【问题描述】：

这是 javascript 的正确代码吗？

var inputsClass = document.getElementsByClassName("inputClass");
var errorSpan = document.getElementsByClassName("errorSpan");

for(var index=0; index < inputsClass.length;index++ )

    inputsClass[index].onclick=function()

    inputsClass[index].errorSpan.style.color="black";

    

因为在我的 JavaScript 控制台中它显示 Uncaught TypeError: Cannot read property 'style' of undefined 但我有相同数量的标签具有 inputsClass 和 errorSpan 类。然而inputsClass[index] 似乎未定义。

html 部分

    <h1> SIGN UP </h1>
<br />
<input type="text" name="firstName" placeholder="First Name"        
    class="inputClass" autofocus/>
<span class="errorSpan"> Testing... </span>
<br />
<input type="text" name="lastName"  placeholder="Last Name" class="inputClass"/>
<span class="errorSpan"> Testing... </span>
<br />
<input type="text" name="userName"  placeholder="Username" class="inputClass"/>
<span class="errorSpan"> Testing... </span>
<br />
<input type="password" name="password" placeholder="Password" class="inputClass"/>
<span class="errorSpan"> Testing... </span>
<br />
<input type="password" name="retypePassword" placeholder="Retype Password"       
    class="inputClass"/>
<span class="errorSpan"> Testing... </span>
<br />
<input type="email" name="email" placeholder="Email" class="inputClass"/>
<span class="errorSpan"> Testing... </span>
<br />

所以当点击输入标签时测试文本节点应该变黑。 顺便说一句，我真的很感谢你帮助我 jfriend00

【问题讨论】：

您的var 没有声明任何内容。您获得的元素没有附加任何变量。

你不能使用var作为变量名，它是JavaScript中的保留字。

即使您的代码不完整，我认为这是循环问题中的典型闭包。至少错误消息表明是这样。

不仅如此，输入也没有.errorSpan 属性。

伙计们，这个问题在循环中有一个闭包问题，但它还有另一个问题是 errorSpan 不是 inputsClass 的属性所以这不是什么的纯粹副本它已被标记为重复并阅读其他问题，它的答案不会解决 OP 的问题（这应该是重复的实际定义）。我投票决定重新开放，因为这个问题的问题不仅仅是缺少关闭。

【参考方案1】：

您有几个问题。第一个问题是您的 onclick 处理函数在您的 for 循环完成很久之后的某个时间被调用。这意味着循环变量 index 的值将位于序列的末尾，并且在事件处理函数中无效。

您可以通过添加一个闭包来解决第一个问题，该闭包分别为每个回调函数捕获索引值。

第二个问题是你不能做inputsClass[i].errorSpan。 errorSpan 不是 inputsClass[i] 的有效属性。

尚不清楚您要使用errorSpan 做什么。如果你想找到包含在特定inputClass 对象中的errorSpan，那么你可以使用inputClass[i].getElementsByClassname("errorSpan")[0]。如果inputClass 和errorSpan 是并行数组并且来自i 输入类，您想引用ierrorSpan，那么您可以使用errorSpan[i]。以下是两个版本：

查找包含在inputsClass 中的errorSpan：

var inputsClass = document.getElementsByClassName("inputClass");

for(var index=0; index < inputsClass.length;index++ )
    (function(i) 
        inputsClass[i].onclick = function() 
            inputsClass[i].getElementsByClassName("errorSpan")[0].style.color="black";
        
    )(index);

使用inputsClass 和errorSpan 的并行数组：

var inputsClass = document.getElementsByClassName("inputClass");
var errorSpan = document.getElementsByClassName("errorSpan");

for(var index=0; index < inputsClass.length;index++ )
    (function(i) 
        inputsClass[i].onclick = function() 
            errorSpan[i].style.color="black";
        
    )(index);

如果您展示您的实际 HTML 并解释您要完成的工作，而不是仅仅发布一段不起作用的代码，我们可以提供更完整的建议。