Changing the Background Color Using Buttons


This lesson will use buttons to change the background color of the screen.


We create the Buttons that will be used in changing the color of the background. We use the following Code:


[FORM] [INPUT TYPE="BUTTON" VALUE="Pure White" onClick="document.bgColor=('#ffffff')"]
[INPUT TYPE="BUTTON" VALUE="Std. gray" onClick="document.bgColor=('#c0c0c0')"]
[INPUT TYPE="BUTTON" VALUE="Lemon" onClick="document.bgColor=('#fff8b9')"]
[INPUT TYPE="BUTTON" VALUE="Mauve" onClick="document.bgColor=('#c0c0f0')"]
[INPUT TYPE="BUTTON" VALUE="Sky Blue" onClick="setColor('#64bae2')"]
[INPUT TYPE="BUTTON" VALUE="Peach" onClick="setColor('#f4e2aa')"][BR]
[/FORM]

In our code above, INPUT TYPE="BUTTON" , will create the button. VALUE on the other hand, will specify what will be written on the button. onClick="document.bgColor('******')", is the event handler that tells JavaScript to change the background of the document to the color which its code is specified between the apostrophes.

Lets try the code.

By clicking on any button above, the background color of the screen will change.

Now we can move on to Lesson 7 .