JS dynamically generates the element's method to pass the value; the best way to dynamically pass the value

Conclusion: (1) first save the variable to the name attribute of the element.

(2) innerhtml = string to bind the method. It is more reliable than onclick.

 

1. dynamically generated variables must be stored in the attributes of the element. Otherwise, the page cannot be obtained after loading. Put the variables to be stored in the attributes of the DOM element using setattribute.

 <  Head  >     <  Script  Type  = "Text/JavaScript"  >  Window. onload  =   Function (){  VaR  Dvtest  =  Document. getelementbyid (  "  Test  "  );  /* VaR poiidname = {ID: "001", name: "resident1"}; dvtest. innerhtml = '<a funtest = "" onclick = "poidetailclicked (poiidname);" href = "javascript: void (0)"> & nbsp; details </a> ';  */             //  The property is not stored. After the page is loaded, the poiidname is removed from the memory.             //  Solution: store it in the tag attributes.             VaR  Poiidname  = {ID:  "  001  "  , Name:  "  Resident1  "  };  /*  Positive Solution  */            VaR  Tempa  =  Document. createelement (  "  A  "  ); Tempa. setattribute (  "  Funtest  " , Poiidname );  //  The object is stored in the property.  Tempa. onclick  =   Function  () {Poidetailclicked (  This  . Funtest);} Tempa. href  =   " Javascript: void (0)  "  ; Tempa. innerhtml  =   "  & Nbsp; details  "  ; Dvtest. appendchild (Tempa );}  Function  Poidetailclicked (OBJ) {alert (obj. ID +   "  \ N  "   +  OBJ. Name );}  </  Script  >  </  Head  >  <  Body  Class = "Body"  Style  = "Text-align: center ;"  >  <  Div  ID  = "Test"  > </  Div  >  </  Body  >


 

2. Using Div. innerhtml = "<Div onclick = testfunction ()> </div>" is more reliable than using Div. onclick = function () {}.

   VaR PTH = Document. createelement ('th' );  VaR Picflag = I % Recperpageresi;  VaR Address = personinfo. selectsinglenode ('address' ). Text;  VaR Phone = personinfo. selectsinglenode ('phone' ). Text;  VaR Residentname = personinfo. selectsinglenode ('residentname' ). Text;  // Pth. innerhtml = '<Div style = "Background: URL (.. /addedimages/markers_new.png) No-Repeat; Background-position: '+ (-24) * picflag ). tostring () + 'px-198px; "Title =" show this point on the graph "class =" icon "id =" no' + I. tostring () + '"name =' + positionstring + 'onclick =" flytoicon (this) "/> ';              VaR Headpic = Document. createelement ("Div" );  //  Headpic. style. background = "URL (.. /addedimages/markers_new.png) No-Repeat; Background-position: "+ (-24) * picflag ). tostring () + "PX-198px ;"; Headpic. style. backgroundimage = "URL (../addedimages/markers_new.png )" ; Headpic. style. backgroundrepeat = "No-repeat"; Headpic. style. backgroundpositionx = (-24) * picflag). tostring () + "PX" ; Headpic. style. backgroundpositiony = "-198px" ; Headpic. Title = "Show this point on the graph" ; Headpic. classname = "Icon" ; Headpic. ID = "No" + I. tostring (); headpic. Name = Positionstring; headpic. onclick = Function  () {Flytoicon (  This ) ;}; Pth. appendchild (headpic); prow. appendchild (PTH );  VaR Pcell1 = prow. insertcell (1 );  VaR Poiid = Getpoiid (prow. ID );  VaR Tempdiv = Document. createelement ("Div "); /*  <Div> change location of name details </div>  */  Tempdiv. style. Clear = "Both" ; Tempdiv. style. Position = "Relative"; Tempdiv. style. Overflow = "Hidden" ;  /*  VaR tempname = document. createelement ("Div"); // name: tempdiv. appendchild (tempname); tempname. style. float = "Left"; tempname. innerhtml = residentname; tempname. onclick = function () {alert ("hello ");}  */  Tempdiv. innerhtml + = '<Div style = "clear: Both;" overflow = "hidden;" onclick = "alert (this. tagname)">' + residentname + '</div>' ;  VaR Poiidname = {ID: poiid, name: residentname }; //  Details             /*  VaR tempdetail = document. createelement ("Div"); tempdiv. appendchild (tempdetail); tempdetail. style. float = "Left"; tempdetail. classname = "detail bluea"; tempdetail. setattribute ("poiinfo", poiidname); tempdetail. onclick = function () {alert ("hello"); poidetailclicked (this. poiinfo);} tempdetail. onmouseover = function () {This. style. cursor = "Pointer"; this. style. backgroungcolor = "red";} tempdetail. innerhtml = "& nbsp; details ";  */  Tempdiv. innerhtml + = '<A name = "' + poiid + '" class = "detail bluea;" onclick = "poidetailclicked (this);" href = "javascript: void (0) "> & nbsp; details </a>' ; Tempdiv. innerhtml + = ( Function (){ //  Change location                  VaR Tempposiid = prow. ID + "_ loccontrol" ;  VaR Resultstr = '<a id = "' + tempposiid + '" class = "detail bluea" onclick = "setposition (' ; Resultstr + = "'" + Address + "', 'no" + I. tostring () + "','" + tempposiid + "'";  VaR Templen = positionstring. Split (',' ). Length;  If (Templen = 3 ) {Resultstr + = ') "Href =" javascript: void (0) "> & nbsp; add location </a>' ;  Return  Resultstr ;}  Else   If (Templen = 6 ) {Resultstr + = ') "Href =" javascript: void (0) "> & nbsp; change location </a>' ;  Return  Resultstr ;}})(); 

Conclusion: (1) first save the variable to the name attribute of the element.

(2) bind the method to the string.