Javascript中的For循环的正确代码？ [英] Proper code for a For Loop in Javascript?

问题描述

这是javascript的正确代码？

Is this proper code for 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控制台中未捕获类型错误：无法读取未定义的属性style但是，我有相同数量的标签具有类 inputsClass 和 errorSpan 。然而 inputsClass [index] 似乎未定义。

Because in my JavaScript console it says Uncaught TypeError: Cannot read property 'style' of undefined But I have an equal amount of tags that have the class inputsClass and errorSpan. Yet inputsClass[index] seems undefined.

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

So the testing text node should turn black when the input tags are clicked on. By the way, I really appreciate you helping me out jfriend00

推荐答案

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

You have a couple issues. The first issue is that your onclick handler function is called sometime LATER, long after your for loop has finished. That means that the value of your loop variable index is going to be at the end of the sequence and not valid inside the event handler function.

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

You can fix the first issue by adding a closure that captures the index value separately for each callback function.

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

The second issue is that you can't do inputsClass[i].errorSpan. errorSpan isn't a valid property of inputsClass[i].

目前还不完全清楚您正在尝试使用 errorSpan 。如果你想找到包含在特定的 inputClass 对象中的errorSpan，那么你将会执行 inputClass [i] .getElementsByClassname（errorSpan） [0] 。如果 inputClass 和 errorSpan 是并行数组，从 i inputClass，你想参考我 errorSpan ，那么你会做 errorSpan [i ] 。以下是两个版本：

It's not entirely clear what you're trying to do with the errorSpan. If you want to find the errorSpan that is contained within the particular inputClass object, then you would do inputClass[i].getElementsByClassname("errorSpan")[0]. If inputClass and errorSpan are parallel arrays and from the i inputClass, you want to refer to the i errorSpan, then you would do errorSpan[i]. Here are the two versions:

查找 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并解释您尝试完成的内容，而不是只是发布一段不起作用的代码，我们可以提供更完整的建议。

If you show your actual HTML and explain what you are trying to accomplish rather than just post a piece of code that doesn't work, we can offer more complete advice.

这篇关于Javascript中的For循环的正确代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！