How to add onclick event to exist element by Javascript? (document.getElementbyID)

Question

I have a button in my project that when you click over it a function call and add onclick event to all certain elements in my project and show my hidden popup element container.

I have a function that search all exist element in my page and add onclick event to some of elements that they have certain class.

My element is stored in a list array. in each cell of this array (array name is list) stored an element like below:

list[0] = document.getElementById("my_div_id");
list[1] = document.getElementById("my_div_id_1");
list[2] = document.getElementById("my_div_id_2");
...
list[n] = document.getElementById("my_div_id_n");

and I have a function like below in top of my Javascript code:

function say_hello(e, msg) {
    if (e == null) e = window.event;
    //now e handler mouse event in all browser !!!
    alert (e + "::" + msg);
}

I have a function to add onclick event to each element in array. I add onclick event in type of below (separated with (*) comment) but doesn't work any of them:

function search_and_add_events_to_all_dragable_elements (list) {
    for (var z = 0; z < list.length; z++) {
        list[z].href = "javascript:;";
        
        var e;
        var test_msg = "VAYYYYYYYYYY";
        
        /**************
        element.onclick = new Function { alert ('hi'); };
        element.onclick = new Function () { alert ('hi'); };
        element.onclick = new function { alert ('hi'); };
        element.onclick = new function () { alert ('hi'); };
        element.onclick = new function () { return alert ('hi'); };
        element.onclick = function () { return alert ('hi'); };
        element.onclick = alert ('hi');
        element.onclick = "alert ('hi');";
        element.onclick = say_hello(e, test_msg);
        element.onclick = "say_hello();";
        element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
        element.onclick = (function () { return function() { alert("ahaaay"); };
        **************/
        
        list[z].style["padding"] = "20px";
        list[z].style["border"] = "solid 10px";
        list[z].style["backgroundColor"] = "#CCC";
    }
}

I change style in end of my code to perform my code is work and end truly. style change every time but onclick event doesn't add to my div.
only one way add onclick to my project. that is same as below:

list[z].setAttribute("onclick", "alert(\"hi\");");

but are there better ways?

score 1 · Accepted Answer · edited May 10 '18 at 16:10

There is a better way. My first mistake was using JavaScript before my all element load on my page. to solve it you must call element in end of page load or put your javascript code in end of your project. then your code execute exactly when your elements are exist in your page.
for more details about it see links below:
JavaScript that executes after page load

http://www.w3schools.com/jsref/event_onload.asp

My second mistake was hurt :(
I has a div that hold all of my other elements in itself. it was styled display: none; on load. when I call my function it was displayed none and all thins work well (like my new styling) but onclick event didn't work :(( and I spent two days to solve this :((
only be careful your element should not be display: none styled when you are adding your onclick event to it.
then you can use this type of creation onclick event dynamically to your project:

list[z].onclick = (function (e, test_msg) {
    return function(e) {
        sib(e, test_msg);
    };
})(e, test_msg);

this is best way that I know. you can manage event handler and send your arguments also to your function.

I use several time another way of dynamically add onclick event in my project.

How to add onclick event to exist element by Javascript? (document.getElementbyID)

1 Answers1