[SOLVED] onclick event is not working in IE

[rekha]

Hi,

 

I am having a php page where in the textbox if we type h the list of names that are already stored starting with letter h will be displayed.This can be done by creating div element for each names.If i click the div element the address for that element will be diaplayed in another text box.This is written in another function.The onclick event is not working in IE.Here is the code.

 

 

for (var x = 0;x < tmp.length; x++)
	   {
			ins = tmp[x];//alert(ins);
			arrvalue = tmp[x];
			row1[x]  = document.createElement('div');
		 	row1[x].onclick=function(){sett(ins);return true;};
	       	       	val[x] = document.createTextNode(ins);
     				elem.appendChild(row1[x]);
		        row1[x].appendChild(val[x]);
	  }

 

When the div element is clicked the function sett() should be called and the argument should be the content in that div element.But the problem is if i click any div element the last element is passed as an argument.Pls anyone know solve this issue.

 

Thanks

Rekha

http://hiox.org

[KevinM1]

Hi,

 

I am having a php page where in the textbox if we type h the list of names that are already stored starting with letter h will be displayed.This can be done by creating div element for each names.If i click the div element the address for that element will be diaplayed in another text box.This is written in another function.The onclick event is not working in IE.Here is the code.

 

 

for (var x = 0;x < tmp.length; x++)
	   {
			ins = tmp[x];//alert(ins);
			arrvalue = tmp[x];
			row1[x]  = document.createElement('div');
		 	row1[x].onclick=function(){sett(ins);return true;};
	       	       	val[x] = document.createTextNode(ins);
     				elem.appendChild(row1[x]);
		        row1[x].appendChild(val[x]);
	  }

 

When the div element is clicked the function sett() should be called and the argument should be the content in that div element.But the problem is if i click any div element the last element is passed as an argument.Pls anyone know solve this issue.

 

Thanks

Rekha

http://hiox.org

 

JavaScript sometimes has issues with scope, especially when coders try assigning event handlers by using a for-loop.  Try doing something like:

for(var x = 0; x < tmp.length; x++)
{
   (function()
   {
      ins = tmp[x];
      arrvalue = tmp[x];
      row1[x] = document.createElement('div);
      row1[x].onclick = function(){sett{ins}; return true;};
      val[x] = document.createTextNode(ins);
      elem.appendChild(row1[x]);
      row1[x].appendChild(val[x]);
   })();
}

 

Sometimes placing the code that dynamically creates/assigns event handlers within a self-executing anonymous function fixes the problem.

[obsidian]

Another spot that scope resolution really chokes IE is in the declaration of variables. Since you are reassigning your ins variable within the loop, you may need to actually declare it as a var for IE to properly pick it up:

 

Change these lines:

ins = tmp[x];
arrvalue = tmp[x];

 

To this:

var ins = tmp[x];
var arrvalue = tmp[x];

[rekha]

Hi all,

 

Thanks for your reply.I got the solution using with statement in js.The code is as follows.

 

for (var x = 0;x < tmp.length; x++)
	   {
			ins = tmp[x];//alert(ins);
			arrvalue = tmp[x];
			row1[x]  = document.createElement('div');
                                with(ins:tmp[x]){
		 	row1[x].onclick=function(){sett(ins);return true;};
                                }
	       	       	val[x] = document.createTextNode(ins);
     				elem.appendChild(row1[x]);
		        row1[x].appendChild(val[x]);
	  }

 

 

Thanks

Rekha

http://hiox.org