Search code examples
javascriptfirefoxinnerhtml

innerHTML.replace not working in firefox but in IE

I want to rename the onclick method of a button. First my Button has following code:

<input id="my_button" class="update field-button" type="button" onclick="add( this )" value="ADD Something" title="ADD Item" name="my_button"></input>

Then I want something like this: 

<input id="my_button" class="update field-button" type="button" onclick="remove( this )" value="ADD Something" title="ADD Item" name="my_button"></input>

I do the rename with this statement: 

parentNode.innerHTML = parentNode.innerHTML.replace( /(onclick="?)[A-Za-z0-9\-]+(\([^)]*\)"?)/, "$1remove$2" );

parentNode is a var: 

var parentNode = removeButton.parentNode;

In the Internet Explorer it works, but not in firefox

Solution

  • Though I would recommend the rich's answer and put that logic into the clickhandler, it might be interesting what your problem is.

    Firefox does your replacement correctly and calls the buttons native remove-method as the click handler has the buttons's scope. So 

    onclick="remove( this )"

    is the same as

    onclick="document.getElementById('my_button').remove();"

    and the button gets removed from the dom.