Dynamic Background Color Changer...

**pcbrainbuster** · 04-03-2007, 04:30 PM

Hello again folks

,

For some nut-case reason this simple script has gone so wrong

-

<html>
<body bgcolor="black">
<input type="button" onclick="start()" value="Start">
<script>
function start() {
var counter=1
if (counter==1) {
document.body.style.backgroundColor="brown"
counter++}
else if (counter==2) {
document.body.style.backgroundColor="orange"
counter++}
else if (counter==3) {
document.body.style.backgroundColor="blue"
counter++}
else if (counter==4) {
document.body.style.backgroundColor="green"
counter++}
else if (counter==5) {
document.body.style.backgroundColor="red"
counter++}
else {
document.body.style.backgroundColor="black"
counter=1}
}
</script>
</body>
</html>

This script should be changing the background color every time the button is clicked but can't even change it once ! (I'm just seriously angry because I failed at such a simple script)...

And some questions -

1) Shoudn't I be able to edit any attribute of ANY tag by simple doing this for example - <input type="button" value="DOG" onclick="this.value='CAT'">

Thanks

**jscheuer1** · 04-04-2007, 05:44 PM

Your function will never go farther than this:

Code:

function start() {
var counter=1
if (counter==1) {
document.body.style.backgroundColor="brown"
counter++}

This is because every time it runs, counter is set to 1. Try:

Code:

var counter=1;
function start() {
if (counter==1) {
document.body.style.backgroundColor="brown"
counter++} . . .

**pcbrainbuster** · 04-04-2007, 05:49 PM

YES !!! - Thanks for your post John

- Please also check out my other thread which is not being answered - Animation Issue (javascript forum index)

**pcbrainbuster** · 04-04-2007, 05:58 PM

Grrrrr, I was about to finish off my script with that edit but there is still something wrong ! -

<html>
<body>
<input type="button" onclick="start()" value="Start">
<script>
var counter=1
function start() {
if (counter==1) {
document.body.style.backgroundColor="brown"
counter++}
else if (counter==2) {
document.body.style.backgroundColor="orange"
counter++}
else if (counter==3) {
document.body.style.backgroundColor="blue"
counter++}
else if (counter==4) {
document.body.style.backgroundColor="green"
counter++}
else if (counter==5) {
document.body.style.backgroundColor="red"
counter++}
else {
document.body.style.backgroundColor="black"
counter=1}
}
</script>
</body>
</html>

Did you catch anything ?

**thetestingsite** · 04-04-2007, 06:10 PM

Your code works fine in Firefox. Test it out: http://phphost.smackum.com/test.html.

**pcbrainbuster** · 04-04-2007, 06:13 PM

No dice

**thetestingsite** · 04-04-2007, 06:19 PM

In Firefox, the code works fine; however in IE it doesn't work. I don't think this will work in IE:

Code:

document.body.style.backgroundColor='red';

Not sure though. Hope this helps.

**pcbrainbuster** · 04-04-2007, 06:24 PM

Well I think I have used it before and it worked .... Do you mind downloading IE for a while and testing it out

...

**thetestingsite** · 04-04-2007, 06:32 PM

Ok, I played around with it and found that IE doesn't like the button to have the onclick (at least in this script). So I changed it to a link and it works fine. View the test page (the link I posted above) to see for yourself. I will try to figure out how to get it to work with the button now.

**pcbrainbuster** · 04-04-2007, 06:34 PM

I was just running a test before you said that and the same thing happend ! Except I used the onclick event on the body tag....

What could possibly be wrong ????????

Thread: Dynamic Background Color Changer...

Thread Tools

Search Thread

Dynamic Background Color Changer...

Bookmarks

Bookmarks

Posting Permissions