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.
- 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.)
- 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.
- 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.)