title: Javascript append to onClick event
body: <p>I have the following Code which I know doesn't work correctly. 
  Yes I know how to do this in jQuery but in this case I cannot use jQuery. Please no jQuery answers.</p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="text" name="input1" onclick="alert('hello')"&gt;
    &lt;input type="text" name="input2"&gt;
    &lt;input type="text" name="input3"&gt;
  &lt;/form&gt;
  
  
  &lt;script type="text\javascript"&gt;
    window.onload = function () {
      var currentOnClick;
      for (var i = 0; i &lt; document.forms[0].elements.length; i++) {
        currentOnClick = document.forms[0].elements[i].onclick;
        document.forms[0].elements[i].onclick = function () {
          if (currentOnClick) {
            currentOnClick();
          }
          alert("hello2");
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>What I'm trying to do is iterate through the form's elements and add to the onclick function.  But due to the fact that in my last iteration currentOnClick is null this does not run as expected. I want to preserve each of the elements onclick methods and play them back in the new function I'm creating.</p>
  
  <p>What I want:</p>
  
  <ul>
  <li><p>When input1 is clicked, alert "hello" then alert "hello2"</p></li>
  <li><p>When Input2 is clicked, alert "hello2"</p></li>
  <li><p>When Input3 is clicked, alert "hello2"</p></li>
  </ul>