Menu
I'm trying to make a "strobe light" for the heck of it in javascript and I found some code that would do it for me on the internet...but they used bgcolor and I felt that I should be proper but the code only works if I leave it bgcolor...so you know what I mean here's the original:
<html><head>
<title>Strobe</title>
<script>
function toggleBgColor()
{
document.bgColor = document.bgColor == '#ffffff' ? '#000000' : '#ffffff';
setTimeout('toggleBgColor()', 70); //in milliseconds
}
</script>
</head>
<body onLoad='toggleBgColor();'>
</body></html>
and Here's my changes:
<html><head>
<title>Strobe</title>
<script>
function toggleBgColor()
{
document.body.style.background-color = document.body.style.background-color == '#ffffff' ? '#000000' : '#ffffff';
setTimeout('toggleBgColor()', 70); //in milliseconds
}
</script>
</head>
<body onLoad='toggleBgColor();'>
</body></html>
I've also tried changing the document.body.style.background-color to document.body.style.background and document.body.style.backgroundColor ...None of them work...what am I doing wrong?
358
document.body.style.background-color is an invalid identifier (well, technically it's a valid identifier [document.body.style.background], followed by an operator [-], followed by another valid identifier [color], but you know what I mean). Use document.body.style.backgroundColor instead. It does work, provided other things are correct. Live example
You've said you've tried that. I suspect the problem is that your code is failing elsewhere. For instance, you're comparing to '#ffffff':
document.body.style.backgroundColor = document.body.style.backgroundColor == '#ffffff' ? '#000000' : '#ffffff';
// ^^^^^^^^^^^^
The browser may not (probably won't) report back to you in the same format you use to assign the color. That value will come back as "white" in some browsers, and as rgb(255, 255, 255) in others, etc. So the comparison will frequently fail, even when the background color is white. You'd have to handle that complexity, parsing the rgb and doing lookups on color names, etc. —or maintain a flag as in my example above.
Off-topic: Avoid passing strings into setTimeout; instead, use function references directly. In your case:
setTimeout(toggleBgColor, 70); //in milliseconds
Note no quotes, and no () (because they would call the function; we want to pass its reference in, not its return value).
If passing arguments (you're not there, but just for completeness), you can use a function to do that:
setTimeout(function() {
doSomething("foo", "bar");
}, 70);
Unsure of the exact reasoning but css styles when referenced via JavaScript never have -'s in them.
If you checkout the W3 reference page you'll notice they provide the JavaScript syntax for the property in the "Definition and Usage" section :) http://www.w3schools.com/cssref/pr_background-color.asp
Your next problems likely to be that many browsers (Chrome at least) don't internally store the background colour as a hex value, instead useing RGB's.
So your codes comparison would end up comparing "rgb(0, 0, 0)" to "#000000" and thus never returning true. A quick fix off my head would be just to use RGB values in your code.
Off the top of my head i'd imagine a fixed version of your code should look something like this:
function toggleBgColor()
{
document.body.style.backgroundColor = document.body.style.backgroundColor == "rgb(255, 255, 255)" ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
setTimeout('toggleBgColor()', 70);
}
Anyways, hope that helps :)
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
