Question

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

Answer 1

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

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

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

目前还不完全清楚你要对errorSpan做些什么。如果要查找特定inputClass对象中包含的errorSpan，则可以执行inputClass[i].getElementsByClassname("errorSpan")[0]。如果inputClass和errorSpan是并行数组且来自i inputClass，您想引用i errorSpan，那么您会errorSpan[i] }。以下是两个版本：

查看errorSpan中包含的inputsClass：

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并解释你想要完成什么，而不是仅仅发布一段不起作用的代码，我们可以提供更完整的建议。

Javascript中For循环的正确代码？

1 个答案: