Proper code for a For Loop in Javascript?

Question

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";

    }
}

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 Portion

    <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 />

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

Your var declares nothing. There is no variable attached to the elements you are getting. — zero298
– zero298, Commented Mar 8, 2014 at 19:17
You may not use var as a variable name, it's a reserved word in JavaScript. — Madara's Ghost
– Madara's Ghost, Commented Mar 8, 2014 at 19:18
Even though your code is incomplete, I assume it's the typical closure in the loop problem. At least the error message suggests so. — Felix Kling
– Felix Kling, Commented Mar 8, 2014 at 19:18
Not only that, but the inputs do not have a .errorSpan property as well. — Bergi
– Bergi, Commented Mar 8, 2014 at 19:19
Folks, this question has a closure in a loop issue, but it also has another issue in that errorSpan isn't a property of the inputsClass so this is NOT a pure duplicate of what it's been marked a dup of and reading that other question and it's answers will not solve the OP's problem (which should be the actual definition of a duplicate). I voted to reopen based on the fact that this question has more issues than just a missing closure. — jfriend00
– jfriend00, Commented Mar 8, 2014 at 19:54

jfriend00 · Accepted Answer · 2014-03-08 19:40:36Z

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.

The second issue is that you can't do inputsClass[i].errorSpan. errorSpan isn't a valid property of inputsClass[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:

Find errorSpan contained within 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);
}

Use parallel arrays of inputsClass and 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);
}

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.

Collectives™ on Stack Overflow

Proper code for a For Loop in Javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related