-1

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

user3029001
  • 389
  • 3
  • 6
  • 15
  • Your `var` declares nothing. There is no variable attached to the elements you are getting. – zero298 Mar 08 '14 at 19:17
  • You may not use `var` as a variable name, it's a reserved word in JavaScript. – Madara's Ghost Mar 08 '14 at 19:18
  • 1
    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 Mar 08 '14 at 19:18
  • 2
    Not only that, but the inputs do not have a `.errorSpan` property as well. – Bergi Mar 08 '14 at 19:19
  • @Bergi: True, but if that was actually the OP's code, he should get the error "Cannot read property errorSpan of undefined". But who knows... that's the problem with incomplete code... – Felix Kling Mar 08 '14 at 19:23
  • 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. – jfriend00 Mar 08 '14 at 19:40
  • 1
    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 Mar 08 '14 at 19:54
  • I was trying to add a functionality where each click of an input tag would change following span tags' color to black. For example, a click on input1 would change the color or span1, and a click on input2 would change the color or span2. I thought looping through would assign each input an onclick event and also change the span tag colors when clicked on – user3029001 Mar 08 '14 at 21:22
  • @user3029001 - as I've said twice now, show us your HTML and we can help you much better. – jfriend00 Mar 08 '14 at 21:37

1 Answers1

2

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979