taps128 Posted March 26, 2007 Share Posted March 26, 2007 Hi. I wanted to change the background color of td field in a table when the user clicks on the field in question. I wrote a script that does that. But, I also want the filed to revert to an another color when the user clicks on it again. That doesn't work. This is the complete code (it uses php to write the tabel) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title></title> <style type="text/css"> td { cursor:default; } </style> <script type="text/javascript"> function promjeniBoju(id) { var td=document.getElementById(id); if (td.style.background=="red") { td.style.background="yellow"; } else { td.style.background="red"; } } </script> </head> <body> <table border=0> <tr> <? $i=1; while ($i<31) { echo ("<td id=\"$i\" onclick=\"promjeniBoju($i);\">$i</td>"); if ($i%7==0){echo ("</tr><tr>");} $i++; } ?> </tr> </table> </body> </html> Any help will be appreciated. TIA Quote Link to comment Share on other sites More sharing options...
mainewoods Posted March 26, 2007 Share Posted March 26, 2007 Some browsers differ in how the color is actually stored and retrieving the color may yield a different value that looks like: rgb(num, num, num) in some browsers. Check what is actually stored in the dom by adding this to your code: alert(td.style.background); I'm not sure which is the more 'standards' way, but I always use 'backgroundColor' to set the attribute using js. As well you seem to be using a number for the id="" values. You're not supposed to do that and it will break in some browsers. Try adding a letter to the beginning of the id: echo ("<td id=\"a$i\" onclick=\"promjeniBoju(a$i);\">$i</td>"); if ($i%7==0){echo ("</tr><tr>"); --I added the letter 'a' to the beginning of the id and the function call parameter as well. Quote Link to comment Share on other sites More sharing options...
taps128 Posted March 27, 2007 Author Share Posted March 27, 2007 Some browsers differ in how the color is actually stored and retrieving the color may yield a different value that looks like: rgb(num, num, num) in some browsers. Check what is actually stored in the dom by adding this to your code: alert(td.style.background); I'm not sure which is the more 'standards' way, but I always use 'backgroundColor' to set the attribute using js. As well you seem to be using a number for the id="" values. You're not supposed to do that and it will break in some browsers. Try adding a letter to the beginning of the id: echo ("<td id=\"a$i\" onclick=\"promjeniBoju(a$i);\">$i</td>"); if ($i%7==0){echo ("</tr><tr>"); --I added the letter 'a' to the beginning of the id and the function call parameter as well. Thank you. I tryed using backgroundColor, and it worked. Unfortunately, changing ID s will not be so easily done. Thanks. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted March 27, 2007 Share Posted March 27, 2007 If you look at the way I changed this line, it should already incorporate all the changes necessary to change the id: echo ("<td id=\"a$i\" onclick=\"promjeniBoju(a$i);\">$i</td>"); if ($i%7==0){echo ("</tr><tr>"); --look carefully at the id=, it now contains an extra letter 'a' at the beginning, and the function call also contains that letter: onclick=\"promjeniBoju(a$i);\" --that should be all you need, the rest of the code can stay the same. You can use numbers in ids, they just can't start with a number: id="123"; //wrong id="a123"; //ok Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.