Question

I have a radio button, containing an inline onclick event:

<input type="radio" class="quantitycheckbox" onclick="alterQuantity(this.form)">

I’m trying to unobtrusively add some more functionality on click, and have this code:

function updateCustomFields( box ) {
    // save current onclick event before assigning new one
    var currEvent = box.onclick;
    box.onclick = function() {
        currEvent();
        // do additional stuff here
    }
}

var boxes = $class('quantitycheckbox');
for( var i = 0; i < boxes.length; i++ ) {
    updateCustomFields( boxes[i] );
}

However, the value of this.form that’s passed into the alterQuantity function is undefined, and I get an error. How would I preserve the onclick event as it is and add my functionality?

Answer 1

You don’t need to do anything with the inline onclick event. Simply by attaching another event using attachEvent or addEventListener will solve your problem since the inline onclick event will always fire first:

function updateCustomFields( box ) {
    var myCallback = function(){
      // Do stuff here
    }
    if(window.addEventListener){
      box.addEventListener('click', myCallback, false);
    } else if (window.attachEvent){
      box.attachEvent('onclick', myCallback);
    }
}

The execution order will be:

1. Inline event
2. Your new event