Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2012-03-11
13
Medium Priority
?
552 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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 2000 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

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

607 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