Solved

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

Posted on 2012-03-11
13
477 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
  • 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
forgetful about js objects 8 47
SSRS 2016 Rendering HTML tables 3 31
Copying table data to one another 15 31
Responsive Font Size 6 29
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

830 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