| home / programming / javascript / beginning / chap6 / 5 |
  
[previous] [next] |
|
|
Beginning JavaScriptHow It WorksWithin 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:
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.
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.
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.
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.
Adding New Options with Internet ExplorerIn IE there are many more additional properties, methods, and events associated with objects. In particular, the options[] array we are interested in has the additional add() and remove() methods, which add and remove options. These make life a little simpler. Before we add an option, we need to create it. This is done in exactly the same way as before, using the new operator. The add() method allows us to insert an Option object that we have created, and takes two parameters. We pass the option that we want to add as the first parameter. The optional second parameter allows us to specify which index position we want to add the option in. This won't overwrite any Option object already at that position, but simply moves the Option objects up the array to make space. This is basically the same as what we had to code into the butAddWed_onclick() function using our for loop.Using the add() method, we can rewrite the butAddWed_onclick() function in our ch6_examp7.htm example to look like this:
Modify the previous example and save it as ch6_examp8_IE.htm, before loading it into IE. You'll see that it works just as the previous version did.
|
| home / programming / javascript / beginning / chap6 / 5 |
[previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: February 7, 2001
Revised: February 7, 2001
