help with javascript code (Button bgColor changer)

**mooeypoo** · May 26, 2006

Hi guys.

I'm makin a script that basically should change the bgcolor value of a cell (<td>) with an id to red and back to blue.

My html section looks like this:

 
<table>
<tr><td id="TDA"><input type=button name="ButtA" value="A" OnClick="ToggleButtonValue('TDA','ButtA');"></td></tr>
<tr><td id="TDB"><input type=button name="ButtB" value="B" OnClick="ToggleButtonValue('TDB','ButtB');"></td></tr>
<tr><td id="TDC"><input type=button name="ButtC" value="C" OnClick="ToggleButtonValue('TDC','ButtC);"></td></tr>
<tr><td id="TDD"><input type=button name="ButtD" value="D" OnClick="ToggleButtonValue('TDD','ButtD');"></td></tr>
</table>

The script section is this:

 
<script language="Javascript">
function ToggleButtonValue(buttonName,TDId)
{
    var ButtonObj = document.getElementById(buttonName);
    var TdObj = document.getElementById(TDId);
    // CC0000 = red
    // 006699 = regular bluish green

    if (TdObj.bgColor = "#006699") {
            TdObj.bgColor="#CC0000";
    }
    else {
           TdObj.bgColor="#006699";
    }

}
</script>

The code works in changing the initial color, but when I click the button again, in hopes of changing the red bgcolor back to blue, it doesn't do anything. Not even an error message.

Ideas?

~moo

**Klaynos** · May 27, 2006

There's a far easier way to do this than that

put in the code:

onclick="this.style.backgroundColor='yellow';"

or you can use onmouseup and onmousedown, where down is when you pushdown to click, and up is releasing the button...

Rereading your post you should probably ignore this.... But you might want to change bgColor to style.backgroundColor :s

**mooeypoo** · May 27, 2006

I tried switching ".bgColor" to ".style.backgroundColor" -- and it still doesn't switch BACK to the original state.

I cant understand why

heeellppp

~moo

**mooeypoo** · May 27, 2006

YESS!!

I found a solution. First, I changed the buttons to Checkboxes.

So, now it looks like that:

 
<table>
<tr><td id="SpecCell_1_1">
<input type=checkbox name="whatever_1" OnClock="this.checked ? document.all.SpecCell_1_1.bgColor='#CC0000' : document.all.SpecCell_1_1.bgColor='#006699'" >
</td></tr>
<tr><td id="SpecCell_1_2">
<input type=checkbox name="whatever_2" OnClock="this.checked ? document.all.SpecCell_1_2.bgColor='#CC0000' : document.all.SpecCell_1_2.bgColor='#006699'" >
</td></tr>
</table>

It works like a charm.

Thanks anyways!

~moo

6.4k · May 27, 2006

Just for future here's a source code for a few buttons with which you can change the background. You could edit the code to allow for different colours or make it change a cell/table instead of the background.

Here's the code:

<html>
<body bgcolor="#FFFFFF">
<script language="JavaScript">

<!-- Begin
function changeBackground(hexNumber) {
document.bgColor=hexNumber
}
prefix="#"
rnum1=0
bnum1=0
gnum1=0
rnum2=0
bnum2=0
gnum2=0
hexNumber2="#000000";
rcount=0;
bcount=0;
gcount=0;
function num2hex(num) {
if (num==15) return "f";
else if (num==14) return "e";
else if (num==13) return "d";
else if (num==12) return "c";
else if (num==11) return "b";
else if (num==10) return "a";
else if (num==9) return "9";
else if (num==8) return "8";
else if (num==7) return "7";
else if (num==6) return "6";
else if (num==5) return "5";
else if (num==4) return "4";
else if (num==3) return "3";
else if (num==2) return "2";
else if (num==1) return "1";
else return "0";
}
function changeBackground2(number) {
if(number == 1) {
rnum1=rcount%16;
if (rcount <15) {
rcount=rcount+1;
 }
}
if(number == 2) {
gnum1=gcount%16;
if (gcount <15) {
gcount=gcount+1;
 }
}
if(number == 3) {
bnum1=bcount%16;
if (bcount <15) {
bcount=bcount+1;
 }
}
if(number == 4) {
rnum1=rcount%16;
if (rcount > 0) {
rcount=rcount-1;
 }
}
if(number == 5) {
gnum1=gcount%16;
if (gcount > 0) {
gcount=gcount-1;
 }
}
if(number == 6) {
bnum1=bcount%16;
if (bcount > 0) {
bcount=bcount-1;
 }
}
hexNumber2 = prefix+num2hex(rnum1)+num2hex(rnum2)+num2hex(gnum1)+num2hex(gnum2)+num2hex(bnum1)+num2hex(bnum2);
 document.bgColor=hexNumber2}// End --></script>

<form method="POST" name="background">
   <table border="3" cellpadding="3" width="350">
       <tr>
           <td align="center"><input type="button" value="Red"
           onclick="changeBackground('#FF0000')"></td>
           <td align="center"><input type="button" value="Green"
           onclick="changeBackground('#00FF00')"></td>
           <td align="center"><input type="button" value="Blue"
           onclick="changeBackground('#0000FF')"></td>
           <td align="center"><input type="button" value="White"
           onclick="changeBackground('#FFFFFF')"></td>
           <td align="center"><input type="button" value="Black"
           onclick="changeBackground('#000000')"></td>
           <td align="center"><input type="button" value="Grey"
           onclick="changeBackground('#C0C0C0')"></td>
       </tr>
   </table>
</form>
</body>
</html>

Sign In

help with javascript code (Button bgColor changer)

Recommended Posts

mooeypoo

Klaynos

mooeypoo

mooeypoo

5614

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information