title: How to add onclick event to exist element by Javascript? (document.getElementbyID)
body: <p>I have a button in my project that when you click over it a function call and add <code>onclick</code> event to all certain elements in my project and show my hidden popup element container.</p>
  <p>I have a function that search all exist element in my page and add <code>onclick</code> event to some of elements that they have certain class.</p>
  <p>My element is stored in a list array. in each cell of this array (array name is <code>list</code>) stored an element like below:<br /></p>
  <pre><code>list[0] = document.getElementById(&quot;my_div_id&quot;);
  list[1] = document.getElementById(&quot;my_div_id_1&quot;);
  list[2] = document.getElementById(&quot;my_div_id_2&quot;);
  ...
  list[n] = document.getElementById(&quot;my_div_id_n&quot;);
  </code></pre>
  <p>and I have a function like below in top of my Javascript code:</p>
  <pre><code>function say_hello(e, msg) {
      if (e == null) e = window.event;
      //now e handler mouse event in all browser !!!
      alert (e + &quot;::&quot; + msg);
  }
  </code></pre>
  <p>I have a function to add <code>onclick</code> event to each element in array. I add <code>onclick</code> event in type of below (separated with (*) comment) but doesn't work any of them:</p>
  <pre><code>function search_and_add_events_to_all_dragable_elements (list) {
      for (var z = 0; z &lt; list.length; z++) {
          list[z].href = &quot;javascript:;&quot;;
          
          var e;
          var test_msg = &quot;VAYYYYYYYYYY&quot;;
          
          /**************
          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 = &quot;alert ('hi');&quot;;
          element.onclick = say_hello(e, test_msg);
          element.onclick = &quot;say_hello();&quot;;
          element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
          element.onclick = (function () { return function() { alert(&quot;ahaaay&quot;); };
          **************/
          
          list[z].style[&quot;padding&quot;] = &quot;20px&quot;;
          list[z].style[&quot;border&quot;] = &quot;solid 10px&quot;;
          list[z].style[&quot;backgroundColor&quot;] = &quot;#CCC&quot;;
      }
  }
  </code></pre>
  <p>I change <code>style</code> in end of my code to perform my code is work and end truly. style change every time but <code>onclick</code> event doesn't add to my <code>div</code>.<br />
  only one way add <code>onclick</code> to my project. that is same as below:</p>
  <pre><code>list[z].setAttribute(&quot;onclick&quot;, &quot;alert(\&quot;hi\&quot;);&quot;);
  </code></pre>
  <p>but are there better ways?</p>