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.