How do I change the body background color with an input button?

It should be "backgroundColor" - not "background-color" for javascript.

So...

document.body.style.backgroundColor='lavender';

you can just use this document.bgColor if you want to change the page color see below

<input type="button" onClick="document.bgColor='lavender';" value="Change background color" />

I see, and how come this separate function doesn't work?

<script>
function backgroundLavender(){
	document.bgColor="lavender";
}
</script>

<ul>
<li><img src="lavenderSquare.jpg" onClick="backgroundLavender()"></img></li>
</ul>

Select allOpen in new window

It should work , it is working for me .

So when you click on the lavender square image, the body background turns lavender?

Yes , which browser are you using ?

Using firefox 8.0. I am able to change the background with the "Change Background Color" button, but not with with the small purple square image. Any idea why the purple square does nothing?

You can do it in diff ways
1)

<input type="button" onClick="document.bgColor='lavender';" value="Change background color" />

2)

function changeBackground() {
   document.body.style.background = 'lavender';
}


3)
Write a css func

<style>
body.lavbg
{
  background: lavender;
}
</style>
<input type="button" onClick="document.body.className='lavbg';" value="Change background color" />

Here's the link I'm looking at:

http://wdiclass.com/poureb/homework4special/homework4special.html

Actually, this worked:

function changeBackground() {
   document.body.style.background = 'lavender';
}

You're right

thanks