Search code examples
javascriptinternet-explorerappendchild

How to add onclick attribute on the fly?

I have tried below one el.setAttribute("onclick","alert("+color['R'][i]+")"); but not working in IE older browser. 

function r_loadResources(color) {
    var rows='';    
    var index =1;
    container = document.getElementById('color_table');
    for(i=0;i<color['R'].length;i++) {  
    if(I%8==0) {
        rows = document.createElement('tr');
        rows.setAttribute("id","row"+i);
        container.appendChild(rows);    
    }
    if(document.getElementById('row'+i))
    rowids = document.getElementById('row'+i);

    var el = document.createElement('td');
    el.bgcolor = color['hex_value'][i]);
    el.setAttribute("height",'20px');
    el.setAttribute("width",'10px');
    el.setAttribute("onclick","alert("+color['R'][i]+")");
    //el.setAttribute("onmouseover","Tip('"+color['color_name'][i]+"');");
    //el.setAttribute("onmouseout","UnTip();");
    rowids.appendChild(el); 
    }
}

Html code is <table><tbody id="color_table"></tbody></table>

Variables 

var color = new Array();
color["color_name"]= new Array("Fire Red","Tomato Red","Magenta","Orange","Yellow","Beige Yellow","Kelley Green","Forest Green","Teal Blue","Process Blue","Royal Blue","Navy Blue","Pastel Purple","Osha Purple","Deep Purple","Burgundy","Light Brown","Dark Brown","Beige","Gold","Silver","Dark Grey","Black","White","Blue","Green","Yellow2");
 color["R"]= new Array("195","218","221","231","252","255","0","0","0","0","0","5","129","140","90","110","116","75","238","183","194","114","31","255","0","37","255");
color["G"]= new Array("38","37","19","120","219","252","154","97","153","175","68","44","109","46","26","29","78","51","227","148","193","112","26","255","61","169","198");
color["B"]= new Array("31","29","123","23","0","184","80","47","152","239","129","81","165","126","116","38","42","31","198","65","193","111","23","255","107","55","30");
color["hex_value"]= new Array("#c3261f","#da251d","dd137b","#e77817","#fcdb00","#fffcb8","#009a50","#00612f","#009998","#00AFEF","#004481","#052c51","#816da5","#8c2e7e","#5a1a74","#6e1d26","#744e2a","#4b331f","#ede3c6","#b79441","#c2c2c1","#72706f","#1f1a17","#ffffff","#003d6b","#25a937","#ffc61e");

Output should be ![enter image description here][1] [1]: https://i.sstatic.net/2u1Qx.jpg

Solution

  • The correct solution is var el = document.createElement('td'); el.onclick = el.onclick = new Function("clickHandler('"+color['R'][i]+"')"); It works in all browsers.