Question

33

Javascript append to onClick event

rated 0 times [ 39] [ 6] / answers: 1 / hits: 20411 / 14 Years ago, fri, may 7, 2010, 12:00:00

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.

<form>

  <input type=text name=input1 onclick=alert('hello')>

  <input type=text name=input2>

  <input type=text name=input3>

</form>





<script type=textjavascript>

  window.onload = function () {

    var currentOnClick;

    for (var i = 0; i < 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);

      }

    }

  }

</script>

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.

What I want:

When input1 is clicked, alert hello then alert hello2

When Input2 is clicked, alert hello2

When Input3 is clicked, alert hello2

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sherryd

Add To Favorites

Follow

Total Points: 254

Total Questions: 92

Total Answers: 89

Location: Equatorial Guinea

Member since Sun, Feb 14, 2021

3 Years ago

answered 14 Years ago harleyaleenag · Accepted Answer

This helps:

window.onload = function () {

    for (var i = 0, element; element = document.forms[0].elements[i]; i++) {

        element.onclick = (function (onclick) {

            return function(oEvent) {

                // reference to event to pass argument properly

                oEvent  = oEvent || event;

                if (onclick)

                    onclick(oEvent);

                // new code injection

                alert(hello2);

            }

        })(element.onclick);

    }

}

Or this:

window.onload = function () {

    for (var i = 0, element; element = document.forms[0].elements[i]; i++) {

        element.exonclick = element.onclick;

        element.onclick = function (oEvent) {

            if (this.exonclick) {

                this.exonclick(oEvent);

            }

            //

            alert(hello2);

        }

    }

}

Please be warned, the technique will not work if event handlers were added with DOM-Events API.