Why does the JavaScript code stop execution after the for loop

Question

This is my try at creating a registration page however after the for loop whatever follows does not execute and I'm at a loss as to why? Below is the javascript code and the form

<script type='text/javascript'>
myArray = ['username','email','password','password2'];
reply = ['User Name','Email','Password','Password Again'];
message = "Please Type you're ";
start = "<font color = red size='-1'>";
end = "</font>";
test = 10;
obj = validate();
alert (obj);
function validate(){

for (var i=0; i<=myArray.length; i++) {
               if (document.getElementById("in"+myArray[i]).value == "")
               {
                   document.getElementById(myArray[i]).innerHTML = start+message+reply[i]+end;
                   test = 30;
               }
                }
alert ("test");
}

<form action="echo.php" method="post" name="register" onsubmit="return validate();">
<table>
    <tr>
      <td width="185"><font size="2">First Name</font></td>
      <td width="499">
        <input id = "infirst_name" name="first_name" type="text" /><div id="first_name"></div></td>
    </tr>
    <tr>
      <td><font size="2">Last Name</font></td>
      <td><input id = "inlast_name" name="last_name" type="text" /><div id="last_name"></font></div></td>
    </tr>
    <tr>
      <td><font size="2">Username*</font></td>
      <td>
        <input id = "inusername" name="username" type="text" /><div id="username"></div></td>
    </tr>
    <tr>
      <td><font size="2">Email*</font></td>
      <td><input id = "inemail" name="email" type="text" /><div id="email"></div></td>
    </tr>
    <tr>
      <td><font size="2">Password*</font></td>
      <td><input id = "inpassword" name="password" type="password" /><div id="password"></div></td>
    </tr>
    <tr>
      <td><font size="2">Repeat Password*</font></td>
      <td>
        <input id = "inpassword2" name="password2" type="password" /><div id="password2"></div></td>
    </tr>
    <tr>
    <tr>
      <td><font size="2">I have read and Agree to the Terms and Conditions</font></td>
      <td>
        <input id = "incheckme" name="checkme" type="checkbox" /><div id="checkme"></div></td>
    </tr>
    <tr>
      <td><input type="submit" value="Register" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

Have you checked the javascript error console?

user1233508
– user1233508

2012-04-10 11:15:39 +00:00
Commented Apr 10, 2012 at 11:15 — user1233508
– user1233508, Commented Apr 10, 2012 at 11:15

jlb · Accepted Answer · 2012-04-10 11:18:12Z

7

Try fixing your loop:

for (var i=0; i < myArray.length; i++) {

JavaScript will stop executing anything if it encounters an uncaught error. In your case it seems that you've looped past the last element (and tried to set innerHTML on an undefined object).

answered Apr 10, 2012 at 11:18

jlb

20.1k8 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dave Newton · Accepted Answer · 2012-04-10 11:18:03Z

2

Most likely because you iterate past the end of the array, but reference it like there's something there.

answered Apr 10, 2012 at 11:18

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

Comments

Serge · Accepted Answer · 2012-04-10 11:18:52Z

1

See JS console output: perhaps it says that you have an error. i falls out of myArray length: change the loop condition from "i<="to "i<" and you'll be fine.

answered Apr 10, 2012 at 11:18

Serge

1,6132 gold badges24 silver badges48 bronze badges

Collectives™ on Stack Overflow

Why does the JavaScript code stop execution after the for loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related