Jump to content

Changing the background color of a database filed using the onclick method

taps128

By taps128
in Javascript Help

Recommended Posts

taps128 Newbie

taps128

Posted
Posted

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

mainewoods Newbie

mainewoods

Posted
Posted

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.

taps128 Newbie

taps128

Posted
  • Author
Posted

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.

mainewoods Newbie

mainewoods

Posted
Posted

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

Archived

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

Go to topic listing
×
×
  • Create New...

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.