Solved

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

Posted on 2012-03-11
13
485 Views
Last Modified: 2012-03-12
I can't figure out why none of these three attempts are changing the background color of my webpage linked below. Does anyone know why?

<input type="button" onClick="document.body.style.background-color='lavender';" value="Change background color" />
<ul>
	<li><img src="lavenderSquare.jpg" onClick="return backgroundLavender()"></img></li>
	<li><a href="#" onClick="javascript:changeBGC('#000099')">Click Blue</a></li>
</ul>

Open in new window


http://wdiclass.com/poureb/homework4special/homework4special.html
0
Comment
Question by:shampouya
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
13 Comments
 
LVL 7

Expert Comment

by:micropc1
ID: 37707062
It should be "backgroundColor" - not "background-color" for javascript.

So...

document.body.style.backgroundColor='lavender';
0
 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 37707270
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" />
0
 

Author Comment

by:shampouya
ID: 37707318
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>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 37707361
It should work , it is working for me .
0
 

Author Comment

by:shampouya
ID: 37707365
So when you click on the lavender square image, the body background turns lavender?
0
 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 37707383
Yes , which browser are you using ?
0
 

Author Comment

by:shampouya
ID: 37707396
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?
0
 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 37707398
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" />
0
 

Author Comment

by:shampouya
ID: 37707400
0
 
LVL 13

Accepted Solution

by:
srikanthmadishetti earned 500 total points
ID: 37707402
Try this it should work
<style>
body.lavbg
{
  background: lavender;
}
</style>

<ul>
<li><img src="lavenderSquare.jpg" onClick="document.body.className='lavbg';"></img></li>
</ul>
0
 

Author Comment

by:shampouya
ID: 37707405
Actually, this worked:

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

Author Comment

by:shampouya
ID: 37707408
You're right
0
 

Author Closing Comment

by:shampouya
ID: 37712101
thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question