Choose a color.


In the example above, users are supposed to select a color and then click to continue. They can't continue if they have not selected a color, and they may alter their selection if they change their mind before continuing. The page doesn't quite work right yet. Fix the following flaws by adding appropriate conditionals to the page scripts.

  1. When the user selects a color, the text that says "Choose a color" should be changed to read "Click to confirm your selection." Alter the select() function so that it begins with a conditional: if no box has been selected yet, then the message must be changed. (Hints: for the test, note that the variable chosen is initialized to an empty string when the page is loaded, and that this value is changed once a color has been chosen. To change the text, modify the .innerHTML property of the object with the id equal to label.)
  2. The first time the user selects a color, a check mark appears in the corresponding box. If she then selects a different color, the original mark should disappear. Right now, both check marks remain visible. Alter the select() function by adding an else clause to the conditional you just wrote: if this is not the first time a box has been selected, then the old box must be unchecked. (Hint: the tag of the element to change is stored in the variable chosen. You want to change its src property to the original image source. You can construct the address of the image source from the tag by string concatenation: combine the prefix 'link/' with the tag name and the suffix 'sq.png'. (For example, 'link/' + 'red' + 'sq.png' gives 'link/redsq.png'. The only difference is that you will use a variable in place of 'red'.) A very similar construction appears at the end of the select() function, if you wish to see an example.
  3. Finally, we want something to happen when the user clicks the link. Currently it just prints out a message saying that no color was chosen. We want to do something different based upon the color chosen. Write a switch statement that will do one of four things depending on the value of chosen: load either link/sunset.jpg, link/plants.jpg, or link/underwater.jpg if a color has been chosen, or pop up the current message if none has been chosen yet (the default). (You can use Javascript to tell the browser to load a new page by changing the value of document.location to the new url.)