HTML Tips & Tricks – Change background colors at the push of a button.
Here is a way to let users change the background color of your web page. You can create buttons using the input tag with the type attribute set to button. Then, assign the JavaScript code that changes the background color to the one set by the button. The color of the background is stored in the JavaScript variable document.bgColor.
Here is a step-by-step guide:
1. Create a web page or open an existing one with your HTML editor, or a simple text editor (Notepad).
2. Type the following text to create a button that will change the background color to BLUE (in the document.bgColor variable you may specify the HTML color code #00FF00 instead of BLUE):
<form>
<input onclick=”document.bgColor=’BLUE'” type=”button” value=” BLUE “>
</form>
3. Repeat step 2 for each background color you want your users to choose from. Following is the code for adding WHITE and RED buttons (typed in within the <form></form> tags:
<input onclick=”document.bgColor=’WHITE'” type=”button” value=” WHITE “>
<input onclick=”document.bgColor=’RED'” type=”button” value=” RED “>
This is the full code:
<form>
<input onclick=”document.bgColor=’BLUE'” type=”button” value=” BLUE “>
<input onclick=”document.bgColor=’WHITE'” type=”button” value=” WHITE “>
<input onclick=”document.bgColor=’RED'” type=”button” value=” RED “>
</form>
Everything is easy… once you know it!
