In the next program the user can change the background color of the web page by clicking a button. The color can be chosen randomly.
1: <html>
2: <head>
3: <title>bgcolor1</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h3><center>Changing the background color by clicking on a button</center></h3>
7: <form >
8: <input type=button value=red onClick="bgColor='red' ">
9: <input type=button value=yellow onClick="bgColor='yellow' ">
10: <input type=button value=green onClick="bgColor='green' ">
11: <input type=button value=teal onClick="bgColor='teal' ">
12: <input type=button value=blue onClick="bgColor='blue' ">
13: <input type=button value=khaki onClick="bgColor='khaki' ">
14: <input type=button value=white onClick="bgColor='white' ">
15: </form>
16: </body>
17: </html>
In lines 8-14 a collection of buttons is created which if clicked by the user will change the background color of the web page. Here the color change is direct. More colors can be added to this collection.
In the next program we use functions to achieve the same effect as the last program.
1: <html>
2: <head>
3: <title>bgcolor2</title>
4: <script language=javascript>
5:
6: function r()
7: {
8: document.bgColor="red";
9: }
10:
11: function y()
12: {
13: document.bgColor="yellow";
14: }
15:
16: function g()
17: {
18: document.bgColor="green";
19: }
20:
21: function k()
22: {
23: document.bgColor="khaki";
24: }
25: </script>
26: </head>
27: <body bgcolor=yellow text=black>
28: <h3><center>Changing the background color by clicking on a button</center></h3>
29: <form>
30: <input type=button value=" red " onClick="r()">
31: <input type=button value=yellow onClick="y()">
32: <input type=button value="green " onClick="g()">
33: <input type=button value="khaki " onClick="k()">
34: </form>
35: </body>
36: </html>
We have limited the number of colors (lines 30-33) in the interest of space. When the user clicks on the button created by line 30, the function "r()" in line 8 is called which changes the background color to red. The same explanation is valid for the other buttons.
In the next program a different technique is used. An array is used to hold the names of the colors to achieve the same result as the previous two programs. This method allows the user to change the background color but in the same sequence of colors as given in the array. Only one button is used to achieve the results.
1: <html>
2: <head>
3: <title>bgcolor 4</title>
4: <script language=javascript>
5: var bgrounds=new Array("red", "white", "blue", "yellow", "silver", "maroon", "olive", "lime", "purple");
6: var thisbg=0, bgcolorcount=9;
7:
8: function rotatebg()
9: {
10: thisbg++;
11: if(thisbg==bgcolorcount)
12: {
13: thisbg=0;
14: }
15: document.bgColor=bgrounds[thisbg];
16: }
17:
18: </script>
19: </head>
20: <body bgcolor=yellow text=black >
21: <h3><center>Changing the background color by clicking the button below.</center></h3>
22: <form>
23: <input type=button value=' change color' onClick="rotatebg()">
24: </form>
25: </body>
26: </html>
Line 5 declares bgrounds to be an array and assigns 9 values (colors) to its elements. We could of course have many more colors. The different colors will then be accessed using the index notation for arrays:
bgrounds[0]="red";
bgrounds[1]="white";
...
...
...
bgrounds[8]="purple";
Note that the index for the first element is zero, the index for the second element is 1, and the index for the last element is 8. Line 6 declares two variables, thisbg used as the index for the array bgrounds and set equal to zero, and bgcolorcount set equal to 9, the number of elements of the array bgrounds.
When the user clicks the button "Change color" created by line 23 the function "rotatebg()" (lines 8-16) is called. The first command, line 10, increments the variable thisbg by one. This new value of thisbg is compared to bgcolorcount in line 11. If thisbg is equal to bgcolorcount, namely 9, then it exceeds the largest possible index value which is 8. Then in line 13 thisbg is set back to 0. Then in line 15 the background color is changed to
bgrounds[thisbg]
Note that thisbg is used as the index to access one of the colors from the array bgrounds. This function is called every time the user clicks the "Change color" button.
In the next program we introduce two new features, onLoad and setTimeout() that will change the background colors automatically at given intervals. The first feature, onLoad in the body tag, causes the function "rotatebg()" to be called immediately after the web page is loaded. The second, the function setTimeout() is a timer that continuously calls a function at predetermined intervals.
1: <html>
2: <head>
3: <title>bgcolor 5</title>
4: <script language=javascript>
5: var bgrounds=new Array("red", "white", "blue", "yellow", "silver", "maroon", "olive", "lime", "purple");
6:
7: var thisbg=0, bgcolorcount=9;
8: function rotatebg()
9: {
10: thisbg++;
11: if(thisbg==bgcolorcount)
12: {
13: thisbg=0;
14: }
15:
16: document.bgColor=bgrounds[thisbg];
17: setTimeout("rotatebg()", 2*1000)
18: }
19:
20: </script>
21: </head>
22: <body bgcolor=yellow text=black onload="rotatebg()">
23: <h3><center>Changing bgcolor automatically</center></h3>
24: <br><br><br>
25: </body>
26: </html>
In line 5 an array bgrounds is declared and 9 values are assigned to the array. In line 7 two variables are declared, thisbg which will be used as the index for the elements of the array bgrounds and is set initially to zero. The other variable, bgcolorcount, is set equal to the length of the array, 9. When the web page is loaded the onLoad command in the body tag, line 22, causes the function "rotatebg()" to start changing the background colors. In line 10 the variable thisbg, which serves as the index for the array bgrounds, is incremented by one. This new value of thisbg is compared to bgcolorcount in line 11. If thisbg equals bgcolorcount, namely 9, then it exceeds the largest possible index value which is 8. Then in line 13 thisbg is set back to 0. In line 15, the background color is changed to
bgrounds[thisbg]
Note that thisbg is used as the index to access one of the colors from the array bgrounds. In line 17 we use the timing machanism "setTimeout()" which calls the function "rotatatebg()" every 2 seconds, thus changing the background color every 2 seconds in the same color sequence as the colors in the array bgrounds. Changing the 2 in 2*1000 in line 17 to a higher value will slow the frequency of the color changes, and changing it to alower value will speed the color changes.
The program is easely be modified to choose the colors randomly from the array bgrounds by generating random integers from 0 to 8 to serve as the index of the elements of the bgrounds array. To do so substitute
thisbg=Math.floor(Math.random()*9);
for line 10.
In the next program we allow the user to start and stop the changing of the background colors by clicking on two buttons.
1: <html>
2: <head>
3: <title>bgcolor 6</title>
4: <script language=javascript>
5: var bgrounds=new Array("red", "white", "blue", "yellow", "silver", "maroon", "olive", "lime", "purple");
6:
7: var thisbg=0, bgcolorcount=9, timerID=null;
8:
9: function rotatebg()
10: {
11: thisbg++;
12: if(thisbg==bgcolorcount)
13: {
14: thisbg=0;
15: }
16:
17: document.bgColor=bgrounds[thisbg];
18: timerID=setTimeout("rotatebg()", 2*1000)
19: }
20:
21: function stop()
22: {
23: clearTimeout(timerID);
24: }
25:
26: </script>
27: </head>
28: <body bgcolor=yellow text=black>
29: <h3><center>Changing the background color automatically. To start click on start button below. To end click on end button below.</center></h3>
30: <br><br><br>
31: <form>
32:
33: <input type=button value=start onClick="rotatebg()">
34: <input type=button value=" end " onClick="stop()">
35:
36: </form>
37: </body>
38: </html>
The only changes to the last program are in line 18, the addition of line 34, and the function "stop()" defined in lines 21-24. In line 18 we assign the return value of the "setTimeout()" function to the variable timerID. When the user clicks on the "end" button created in line 34 the function "stop()" is called and the command "clearTimeout()" stops the action.