How It Works - Page 19

Within the body of the page, we define a form with the name form1. This contains the select element containing day of the week options that we have seen above. The form also contains two buttons:

<INPUT TYPE="button" VALUE="Remove Wednesday"
  NAME=butRemoveWed onclick="butRemoveWed_onclick()">
<INPUT TYPE="button" VALUE="Add Wednesday"
  NAME=butAddWed onclick="butAddWed_onclick()">

Each of these buttons has its onclick event handler connected to some code that calls one of two functions: butRemoveWed_onclick() and butAddWed_onclick(). These functions are defined in a script block in the head of the page. We'll take a look at each of them in turn.

At the top of the page we have our first function, butRemoveWed_onclick(), which removes the Wednesday option.

function butRemoveWed_onclick()
{
  if (document.form1.theDay.options[2].text == "Wednesday")
  {
    document.form1.theDay.options[2] = null;
  }
    else
  {
    alert('There is no Wednesday here!');
  }
}

The first thing we do in the function is a sanity check: we must only try to remove the Wednesday option if it's there in the first place! We do this by seeing if the third option in the array, with index 2 because arrays start at index 0, has the text "Wednesday". If it does we can remove the Wednesday option by setting that particular option to null. If the third option in the array is not Wednesday, then we alert the user to the fact that there is no Wednesday to remove. Although I've used the text property in the if statement's condition, we could just have easily used the value property; it makes no difference.

Next we come to the butAddWed_onclick() function, which, as the name suggests, adds the Wednesday option.

This is slightly more complex than the code required to remove an option. First we use an if statement to check that there is not already a Wednesday option. 

function butAddWed_onclick()
{
  if (document.form1.theDay.options[2].text != "Wednesday")
  {
    var indexCounter;
    var days = document.form1.theDay;
    var lastoption = new Option();
    days.options[6] = lastoption;
    for (indexCounter = 6;indexCounter > 2; indexCounter--)
    {
    days.options[indexCounter].text = days.options[indexCounter -
	 1].text;
    days.options[indexCounter].value = days.options[indexCounter -
	 1].value;
    }

[The colored lines above are one line. They have been split for formatting purposes.]

If there is no Wednesday option, we then need to make space for the new Wednesday option to be inserted.

Before we do this we define two variables indexCounter and days, which refers to theDay select element and is a shorthand reference for our convenience. Next we create a new option with the variable name lastoption and assign this new option to the element at index position 6 in our options array. This previously had no contents. We next assign the text and value properties of all the Option objects from Thursday to Sunday to the Option that is at a one higher index in the options array, leaving a space in the options array at position 2 to put Wednesday in. This is the task for the for loop within the if statement.

Next, we create a new Option object by passing the text, "Wednesday" and the value 2 to the Option constructor. The Option object is then inserted into the options[] array at position 2, and hey presto it appears in our select box.

    var option = new Option("Wednesday",2);
    days.options[2] = option;
  }

We end the function by alerting the user to the fact that there is already a Wednesday option in the list, if the condition in the if statement is false.

  else
  {
    alert('Do you want to have TWO Wednesdays?????');
  }
}

Adding New Options - Page 18
Beginning JavaScript
Adding New Options with Internet Explorer - Page 20