Exercise: Add to the last exercise. Make two text boxes. When you click on the link, have an alert box pop up with the contents of one text box, then a second alert box pop up with the contents of the other text box.
Exercise: make a page with 2 small text boxes side by side. Under the text boxes make 4 links... Add, Subtract, Multiply and Divide. When the user clicks on the Add link it should get the two numbers in the boxes, add them together and display the answer in an alert box as follows... 5 + 3 = 8. Do the same for each of the other operations.
Another property we can get or manipulate is the document's background color. Have a look at this...
bgColor is a property of the document object. Try messing around with the color in the body tag and see that it always returns the proper background color. Remove the bgcolor attribute from the body tag altogether and see what happens.
Can we set the bgColor? You betcha...
window.document.bgColor = mycolor;
Do you understand what's going on? Study it until you do.
Exercise: Add 3 more color selections to the page. Also, add something whereby the original color of the page is recorded at the outset and add a seventh choice to set the color back to this default.
Note that in the previous (and following) solution the scripting is after the <body> tag. The reason for this is simple. After a little experimentation I noticed that some browsers record the bgColor at the point where the body tag loads. If you ask the browser to remember the bgColor before it reads the body tag, it cannot remember it and the script will act wierd. (A perfect example of why you should always test your scripts on a couple different browsers and why de-bugging is a large part of any programming effort.) Anyhow, the simple workaround is to place the script after the body tag. I know it's common practice to put scripting within the HEAD section, but that's only a suggested practice, it's not mandatory.
Exercise: Make another page and insert the following images...
The hex color codes are on the images. Make it so that as the mouse passes over each image, the document background color changes accordingly. As the mouse moves off of each image, make the background color change back to the default.