Javascript Dynamic OnChange Event

Question

I am trying to dynamically add an on change event to an HTML select object. I can't seem to get it to work. I need the function to call dropDownChange and pass two parameters, this and nextDepth.

   var nextDepth = (int)......
   var selectBox = ......
   selectBox.onchange += function(nextDepth){dropDownChange(this, nextDepth);};

Not really sure how to tackle this... I figured this could would work. Any help you be GREATLY appreciated.

Thanks!

Could you post your html and real JavaScript? The ellipses don't help me understand what you're trying to do, or worth with... =/ — David Thomas
– David Thomas, Commented Jun 11, 2011 at 20:38

Prusse · Accepted Answer · 2011-06-11 21:38:09Z

1

function changeonchange(){
    var selectBox = document.getElementById("selectBox");
    var nextDepth = getIntFromSomeWhere();

    selectBox.onchange = function() {
        var targ;
        if (!e) var e = window.event;
        if (e.target) targ = e.target;
        else if (e.srcElement) targ = e.srcElement;
        if (targ.nodeType == 3) // defeat Safari bug
            targ = targ.parentNode;
        dropDownChange(targ, nextDepth);
    };
}

You can get more info about events from http://www.quirksmode.org/js/events_properties.html every time "changeonchange" is called a new scope is created to hold the local variables and that scope is carried along the new onchange handler.

edited Jun 11, 2011 at 21:38

answered Jun 11, 2011 at 21:26

Prusse

4,3232 gold badges26 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Over a year ago

Prusse, The variable nextDepth is an integer declared locally in the function that will be changing the select box's on change event.

Greg · Accepted Answer · 2011-06-11 20:58:04Z

1

I am assuming that you are looking for a way to pass in this in relation to the current executing object or namespace. To express this, the code example below uses an anonymous function, where this is stored to the variable me. Then when the select's change event triggers, your custom function is called, passing in the two specified variables.

(function() {
    var me = this;
    var selectBox = document.getElementById("selectBox");
    var nextDepth = 2;

    selectBox.onchange = function() {
        dropDownChange(me, nextDepth);
    };
})();

answered Jun 11, 2011 at 20:58

Greg

22k17 gold badges89 silver badges110 bronze badges

5 Comments

Dave Over a year ago

Greg thanks for the response, I was actually looking to pass this as a pointer to the select box itself.

Greg Over a year ago

@Dave: Passing a function pointer to a DOM object sounds ... well ... it doesn't make sense to me.

Dave Over a year ago

I mean this as in an instace of the select box. When it calls dropDownChange it will pass both a pointer to itself and the integer value of nextDepth

Greg Over a year ago

The this keyword will point to the selectBox DOMElement inside the onchange function.

Piotr Dobrogost Over a year ago

It should have been just dropDownChange.call(this, nextDepth);. There's no need pass context as an argument.

Collectives™ on Stack Overflow

Javascript Dynamic OnChange Event

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related