Chapter 10

In this chapter we looked at some common mistakes in JavaScript code, debugging code using the Microsoft script debugger, and ways of handling errors using the try...catch clause and the throw statement.

Question 1

The example debug_timestable2.htm has a deliberate bug. For each times table it only creates the values from 1 to 11.

Use the script debugger to work out why this is happening, and then correct the bug.

The problem is one of our code's logic rather than syntax. Logic errors are much harder to spot and deal with because unlike syntax errors the browser won't inform you that there's such and such error at line so and so but instead just fails to work as expected. The error is with this line:

for (counter = 1; counter < 12; counter++)

We want our loop to go from 1 to 12 inclusive. Our counter < 12 statement will be true up to and including 11 but will be false when the counter reaches 12, hence 12 gets left off. To correct this, we could change our code to

for (counter = 1; counter <= 12; counter++)

Question 2

The following code contains a number of common errors. See if you can spot them:

<html>
<head>
</head>
<body>
<script language="JavaScript">
    
function checkForm(theForm)
{
   var formValid = true;
   var elementCount  = 0;
    
   while(elementCount =< theForm.length)
   {
      if (theForm.elements[elementcount].type == "text")
      {
    
         if (theForm.elements[elementCount].value() = "")
            alert("Please complete all form elements")
            theForm.elements[elementCount].focus;
            formValid = false;
            break;
    
      }
   }
    
   return formValid;
    
}
    
</script>
    
<form name=form1 onsubmit="return checkForm(document.form1)">
   <input type="text" id="text1" name="text1">
   <br>
   CheckBox 1<input type="checkbox" id="checkbox1" name="checkbox1">
   <br>
   CheckBox 2<input type="checkbox" id="checkbox2" name="checkbox2">
   <br>
   <input type="text" id="text2" name="text2">
   <P>
   <input type="submit" value="Submit" id="submit1" name="submit1">
   </P>
</form>
    
</body>
</html>

The bug-free version looks like this:

<html>
<head>
</head>
<body>
    
<script language="JavaScript">
function checkForm(theForm)
{
   var formValid = true;
   var elementCount  = 0;
    
   while(elementCount < theForm.length)
   {
      if (theForm.elements[elementCount].type == "text")
      {
         if (theForm.elements[elementCount].value == "")
         {
            alert("Please complete all form elements")
            theForm.elements[elementCount].focus();
            formValid = false;
            break;
         }
      }
    
      elementCount++;
   }
    
   return formValid;
    
}
    
</script>
    
<form name="form1" onsubmit="return checkForm(document.form1)">
   <input type="text" id="text1" name="text1">
   <br>
   CheckBox 1<input type="checkbox" id="checkbox2" name="checkbox2">
   <br>
   CheckBox 1<input type="checkbox" id="checkbox1" name="checkbox1">
   <br>
   <input type="text" id="text2" name="text2">
   <P>
   <input type="submit" value="Submit" id="submit1" name="submit1">
   </P>
</form>
    
</body>
</html>

Let's look at each error in turn.

The first error is a logic error.

while(elementCount =< theForm.length)

Arrays start at zero so the first Form object is at index array 0, the second at 1, and so on. The last Form object has an index value of 4. However, theForm.length will return 5 because there are five elements in the form. So the while loop will continue until elementCount is less than or equal to five, but as the last element has an index of 4, this is one past the limit. We should either write

while(elementCount < theForm.length)

while(elementCount <= theForm.length - 1)

Either is fine, though the first is shorter.

We come to our second error in

if (theForm.elements[elementcount].type == "text")

On a quick glance it looks fine, but it's JavaScript's strictness on case sensitivity that has caused our downfall. The variable name is elementCount, not elementcount with a lowercase c. So this line should read

if (theForm.elements[elementCount].type == "text")

The next line with an error is this:

if (theForm.elements[elementCount].value() = "")

This has two errors. First, value is a property and not a method, so there is no need for parentheses after it. Second, we have the all-time classic error of one equals sign instead of two. Remember that one equals sign means make it equal to, and two equal signs means check if it is equal to. So with the changes, the line is

if (theForm.elements[elementCount].value == "")

The next error is our failure to put our block of if code in curly braces. Even though JavaScript won't throw an error since the syntax is fine, the logic is not so fine, and we won't get the results we expect. With the braces, the if statement should be as follows:

if (theForm.elements[elementCount].value == "")
{
   alert("Please complete all form elements")
   theForm.elements[elementCount].focus;
   formValid = false;
   break;
}

The penultimate error is in

theForm.elements[elementCount].focus;

This time we have a method but with no parentheses after it. Even methods that have no parameters must have the empty parentheses after them. So, corrected, the line is

theForm.elements[elementCount].focus();

Now, we're almost done; there is just one more error. This time it's not something wrong with what's there, but rather something very important that should be there but is missing. What is it? It's

elementCount++;

which should be in our while loop, otherwise elementCount will never go above 0 and the while loop's condition will always be true, resulting in the loop continuing forever; a classic infinite loop.