Setting the bgColor & fgColor Properties

JavaScript is driven by Events, which are things that happen on a page, usually as a result of user actions. JavaScript uses Event Handlers to respond to Events. Event Handlers are written into various types of HTML tags and don't require a <SCRIPT> tag.

This page sets the 'bgColor' Property of the Document Object to "indigo" and then allows the user to change the background & foreground colors by clicking the buttons.

BackGround Colors

  

ForeGround Colors

  

<FORM>

     <H3>BackGround Colors</H3>
     <INPUT TYPE="button" VALUE=" Red " onClick="document.bgColor = 'red'">
     <INPUT TYPE="button" VALUE=" White " onClick="document.bgColor = 'white'">

     <H3>ForeGround Colors</H3>
     <INPUT TYPE="button" VALUE=" Blue " onClick="document.fgColor = 'blue'">
     <INPUT TYPE="button" VALUE=" Green " onClick="document.fgColor = 'green'">

</FORM>

For example, the following combination of HTML and JavaScript will change Document's background color (bgColor). Here's what the code looks like:

    <INPUT TYPE="button" VALUE="Click Here." onClick="document.bgColor = 'red'">

The term "onClick" is the Event Handler, and as you can see, it is included as an attribute inside the HTML <INPUT> tag. When a user clicks on the button, the JavaScript code after it is activated, which in this case is to change the background color (bgColor) of the Document to red.

NOTE: Even though Netscape wrote the JavaScript specifications Netscape itself does not adhere to their own specification. document.fgColor for example does not work in Netscape. Throughout this course you will find out that Netscape Browsers have problem after problem. The reason that Netscape lost market share is very simple, their Browsers are inferior!