Exercise 10.9

This is Exercise 10.9, lecture on modifying DOM with Javascript, used in the course IDATA2301 Web technologies at NTNU, campus Aalesund.

Go back to exercise list.

Purpose

The purpose of the exercise is to learn how you can access and modify some properties of DOM elements.

Instructions

1. Find out, how you can catch the event of user picking a value in selectbox, and how you can read the value.
2. Create a page with a text "Pick your favorite color", and a selectbox with values ["Red", "Green" "Roundhouse kick"].
3. Add a text which says: "I see that your favorite color is …". Hint it is probably a good idea to create a paragraph for the whole sentence and include a span for the placeholder of the color. Something along these lines: <p>I see that your favorite color is<span>...</span></p>. You probably also want an ID for the span to get a reference to it in Javascript.
4. Add Javascript which reacts on user picking a color and replaces the "…" with the name of the chosen color.
5. Extend the solution of the previous exercise, add some more colors to the selectbox.
6. Add a div of a certain size (for example, 220x150 pixels), set id="color-example" for it.
7. Whenever the user picks a color in the selectbox, set the background color of that div to the chosen color. Hint: you probably want to define color codes (such as #ff0000) as values for the selecbox options, in addition to the values displayed for the user. An example: <option value="#ff0000">Red</option>. You will also need to modify the code displaying the user-friendly value of the color. Find out on the net how you can access the index of selected item for a selectbox, and then text of the selected option.
8. Extra challenge: when "Roundhouse kick" is selected, set background image of the div with id="color-example" to a picture of you know whom.

Solution

You can find a solution in here.