Modifier l'attribut onClick via Javascript

Question

Je souhaite ajouter plus de fonctionnalités à un code de bouton déjà rendu. La seule façon de le faire est Javascript car il est rendu avant du serveur et j'ai seulement accès au JSP.

Voici ce que j'ai maintenant, mais cela ne fonctionne pas, il affiche simplement le même message deux fois. Et si je clique sur le bouton, l'alerte "bonjour" ne s'affiche pas.

<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> 

Voici le code source rendu de la page:

<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> 

, je veux donc placer le sayHello() avant qu'il ne l'action sur le onClick.

Answer 1

Il est onclick plutôt que onClick, vous devez donc ceci:

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

L'attribut lui-même est toujours pas va afficher quelque chose de différent, mais l'événement eux-mêmes fonctionnera, you can test it here. En outre, pour maintenir this pour vos gestionnaires d'événements, je vous recommande au moins .call() les fonctions, comme ceci:

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