JavaScript Tutorial

JavaScript Tutorial - 6

The plan is to show you how to do this background colour changing.
This is how we change the background colour:

document.bgColor="lightblue" or whatever colour you fancy.

Task 15: Create a page with a background colour change button. Check.

Task 16: Create a page with a button. When you press this button you are told what the background colour is. Check.

You'll notice that JavaScript uses a colour code. You may find my colour chart helpful.

So ... you want to get a different colour each time we press the button?
Then I'll have to let you in on a big secret: we can write our OWN functions ... like this:

function changeBackground() { var n=document.bgColor if (n=="#ffffcc") { document.bgColor="#ccffcc" } if (n=="#ccffcc") { document.bgColor="#ffffcc" } } Task 17: Have a go at using this idea. Check.

Task 18: Extend Task 17 to cycle through 3 colours. Check.

Challenge 7: Using an array instead of a lot of "if" statements, extend task 18 to many colours. One hint: the variable that keeps track of where you are and the array must both be defined outside the function.

HOME

Table of Contents