Jump to content

help with javascript code (Button bgColor changer)

mooeypoo
in Computer Science

Featured Replies

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

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

  • Author

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

 

I cant understand why :(

 

heeellppp

 

~moo

  • Author

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

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.