Log in

View Full Version : 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:


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:


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:



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 ????????
thetestingsite
04-04-2007, 06:39 PM
ok, IE doesn't like the function named start(). Because it refers to a predefined function. Try changing the name of the function to something else like in the following code:



<html>
<head>

<script>
var counter=1;

function chgColor() {

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>

</head>
<body>

<form>
<input type="button" value="Change the color" onclick="chgColor()">
</form>

</body>
</html>


Tested and it works. Hope this helps.
pcbrainbuster
04-04-2007, 06:51 PM
Thanks thetestingsite :), how could I forget that ! - just as a reference point for you, start() is the method of marquee affects. It also has an opposite stop()....