[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2012-03-11
13
Medium Priority
?
513 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

650 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