color changer script

[lorkan]

Hi!

 

I've written a script for changing background color in a table or to be specific in a <td>.

 

The table looks like this:

<table bgcolor='#FFFFFF' border='1' id='manad' name='1'>
<tr style='font-family:Tahoma; font-weight:bold; font-size:12px; color:#000000; padding-top:0px; padding-left:0px; padding-right:0px;'>
<th>Adress</th>
<th>Objnr</th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th><th>29</th>
<th>30</th><th>31</th><th>Anmärkningar</th>
</tr><tr><td class='ha'><b>Roslagsgatan 47</b></td><td id='objektnr' class='ha'>201</td><td onclick='javascript: chg(this, 1, 1, 201)' bgcolor='blue'> </td><td onclick='javascript: chg(this, 2, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 3, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 4, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 5, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 6, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 7, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 8, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 9, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 10, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 11, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 12, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 13, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 14, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 15, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 16, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 17, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 18, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 19, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 20, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 21, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 22, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 23, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 24, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 25, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 26, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 27, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 28, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 29, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 30, 1, 201)' bgcolor='white'> </td><td onclick='javascript: chg(this, 31, 1, 201)' bgcolor='black'> </td><td><p class='ha' id='mer' name="201"> </td></p></tr>

 

And the js file looks like this:

var xmlHttp

xmlHttp=GetXmlHttpObject()


function chg(obj, day, manad, objekt)
{
var arr = new Array(3);
arr[0] = "lime";
arr[1] = "Black";
arr[2] = "Blue";
arr[3] = "White";
var i=0;

obj.onclick=function()
{ 
//document.getElementById('i').firstChild.style.color=arr[i++]; 
var col = arr[i++];
obj.style.backgroundColor = col;

	if (i==4)
	{
	i=0;
	}

						if (col=="lime")
						{
						var coll="3";
						}

						if (col=="Black")
						{
						var coll="1";
						}

						if (col=="Blue")
						{
						var coll="2";
						}

						if (col=="White")
						{
						var coll="0";
						}

		var url="chggete.php"
		url=url+"?manad="+manad+"&dag="+day+"&objektnr="+objekt+"&q="+coll
		url=url+"&sid="+Math.random()
		xmlHttp.onreadystatechange=stateChanged 
		xmlHttp.open("GET",url,true)
		xmlHttp.send(null)


return false; 
} 




	function stateChanged() 
	{ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	 { 
	// document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
	 } 
	}
	function GetXmlHttpObject()
	{
	var xmlHttp=null;
	try
	 {
	 // Firefox, Opera 8.0+, Safari
	 xmlHttp=new XMLHttpRequest();
	 }
	catch (e)
	 {
	 // Internet Explorer
	 try
	  {
	  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  }
	 catch (e)
	  {
	  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	 }
	return xmlHttp;
	}
}

 

The problem with this code is that I have to click twice on a <td> to start changing a color. After that it is only one click to change between the colors.

What I want is to be able to click only once for each color without the initial click to get the scripts attention.

 

I know the problem is in:

 

obj.onclick=function()

and of couse the:

 

<td onclick='javascript: chg(this, 1, 1, 202)'

 

Can somebody suggest a solution for this?

 

Thanks,

 

[lorkan]

I have changed this to :

<td onclick='chg(this, 1, 1, 202)'

 

but the problem still remains...