Ken Ward's New Java Script Tutorial

Java script functions from text - changing background colours

This page shows how a function can be called from java script by using a text link. While the code here still works in modern browsers, a new page shows you how to do this using style in JavaScript


 

Try clicking in the boxes, and then click here to bring things back to some semblance of normality (or click the button above).

On this page we are calling a function from a text link. As we are clicking, we don't want to have a real link here. (And some browsers hate it when we don't put a link in). So we have used a '#':

<a href="#" onclick="white()">click ... </a>

We call the function from HTML by using an ONCLICK event. This calls our function:

<script type="text/javascript">

<!--//

function white()

{

document.bgColor="white"

}

//-->

</script>

So when we click on the link we call a function called, in this case, 'white()'. The function has one line of code (for each colour):

document.bgColor="white"

Java Script is case sensitive!

We tell java script that we want the document's colour to be white. Note that we write bgColor and not bgcolor or something. HTML is not case sensitive, but java script is. We can write BGCOLOR when we put it in the <BODY> tag, because HTML doesn't care as long as we spell it right. We can write BgCoLoR is we want.

While the above is presently true, it is bad practice. The correct way to write the body tag is "<body>". And the correct way to write bgColor in HTML is "bgcolor". This makes the pages compatible with XHTML.

Like modern HTML (XHTML), javascript does care about how you write the words. When written between <script> tags you  need to write bgColor, exactly as written!

While this code still works, a more modern way to accomplish the aims of this page is shown in changing background color with style.

Examine the code for this page..

Next: [Changing foreground colour]

 


Basic Code

Alerts

New Lines

Text Box Input

Changing Background Colour

Changing fgColor

[If you need to learn more about HTML visit the HTML Tutorial]

I am always pleased to hear from you.
Send your comments to