simple background color change on click then after delay change back.

**Tyr** · 09-10-2012 03:10 PM

Hi all, here's the background on what I'm doing: I'm making a photo gallery that you interact with on the touch screen of a camera on screen, I know that sounds confusing, but it makes sense visually. Anywho I have an image of a camera, and what I'd like to do just for fun is make it so it looks like the "flash" went off on the camera when you click on the take picture button. As well as play a short audio clip.

Anywho I'm mainly trying to figure out how to just get the background to switch and then after a tiny delay switch back.

Here's the code that I have for it

Code:

<script> function ChangeBackground()
{
document.body.style.backgroundColor="white"; //immediately change the background color to white
setTimeout(document.body.style.backgroundColor="#000000", 100) //after 100 milliseconds change the background to black.
}
</script>

Then in my page i currently have a button(I'm going to make it a selectable div or image map so there isn't an ugly button over the camera's button, but that's not important at the moment)

Code:

<input type="button" onclick="ChangeBackground()" Value="Flash"/>

Can anyone point out why this code does not work? When I run it, the background doesn't change at all.

Thank you javascript geniouses. I'm still learning but I'm eager to master javascript.

**JMRKER** · 09-10-2012 08:29 PM

100 milliseconds is pretty quick. For testing, I changed to 250 ms.
Alter back, if necessary, after testing.

I also initialized the body to something other than default white,
which is what color changes to just before going black.
Adjust as needed.

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<script type="text/javascript">
function changeColor(info) {
  document.body.style.backgroundColor=info;  // "#000000";
}
function ChangeBackground() {
  document.body.style.backgroundColor="white"; //immediately change the background color to white
  setTimeout("changeColor('#000000')", 250) //after 100 milliseconds change the background to black.
}
</script>

<style type="text/css">

</style>
</head>
<body style="background-Color:#ffff00">
<input type="button" onclick="ChangeBackground()" Value="Flash"/>
</body>
</html>

**rnd me** · 09-10-2012 09:20 PM

add this css to your doc to smooth things out and make the effect more noticeable.

Code:

body{
	-webkit-transition-property: background-color;
	-webkit-transition-duration: 200ms;
	-moz-transition-property: background-color;
	-mmoz-transition-duration: 200ms;
	transition-property: background-color;
	transition-duration: 200ms;
}

**Tyr** · 09-10-2012 10:20 PM

Wow thanks you guys, that works perfectly!

*virtual high five*

**JMRKER** · 09-10-2012 10:29 PM

You're most welcome, I'm sure, from both of us.
Happy to help.
Good Luck!

Thread: simple background color change on click then after delay change back.

Thread Tools

Display

Hybrid View

simple background color change on click then after delay change back.

Wow thanks!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions