JavaScriptを使用してonClick属性を変更する

Question

すでにレンダリングされたボタンコードにさらに機能を追加します。 これを行う唯一の方法はJavascriptです.JavaScriptはサーバーからレンダリングされているため、JSPにしかアクセスできません。

これは私の今のところですが、動作していないので、同じメッセージを2回表示します。ボタンをクリックすると、「こんにちは」というアラートは表示されません。

<script type="text/javascript"> 
function addEventBefore(element, type, fn) { 
    var old = element['on' + type] || function() {}; 
    element['on' + type] = function() { fn(); old(); }; 
} 

function sayHello(){ 
    alert('hello'); 
} 

var arr = document.getElementsByTagName("button"); 
for (i = 0; i < arr.length; i++) { 
    if (arr[i].getAttribute("name") == "Complete"){ 
    var theclick = arr[i].getAttribute("onClick"); 
    alert(theclick); 
    addEventBefore(arr[i], 'Click', sayHello); 
    var theclick2 = arr[i].getAttribute("onClick"); 
    alert(theclick2); 
    } 
} 
</script> 

このページのレンダリングされたソースコードである：

<td valign='top' align='right' > 
<button name="Complete" title="The complete Button" 
onClick="document.forms.TaskInfoPage.action='http://prodserver:8080/Approval.jsp?windowId=dd4c0&eventTarget=stepApproval&eventName=Complete' 
document.forms.InfoPage.submit();return false;">Complete</button> 
</td> 

だから、私はそれがのonClickでアクションを行う前に（）のsayHelloを配置したいが。あなたがこれを必要とするので、

Answer 1

それは、onclickはなくonClickです：

addEventBefore(arr[i], 'click', sayHello); 
        //^lower case here 

属性自体は、まだ別の何かを表示するつもりはないが、イベント自体は動作します、you can test it here。また、あなたのイベントハンドラのthisを維持するために、私はこのように、あなたの少なくとも.call()に機能をお勧めします。

function addEventBefore(element, type, fn) { 
    var old = element['on' + type] || function() {}; 
    element['on' + type] = function() { fn.call(this); old.call(this); }; 
}