Menu
I am trying to append a function to a previously defined button onclick event.
The following does not work, but it doesn’t give me any errors to follow-up on either.
Can anyone give me a clue as to what I am obviously doing wrong?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Append onclick function </title>
</head>
<body>
<input type=”button” value=”Button 1″ onclick=”alert(this.value)”>
<input type=”button” value=”Button 2″ onclick=”alert(this.value)”>
<input type=”button” value=”Button 3″ onclick=”alert(this.value)”>
<input type=”button” value=”Button 4″ onclick=”alert(this.value)”>
<input type=”button” value=”Button 5″ onclick=”alert(this.value)”>
<pre id=”debug”></pre>
<script type=”text/javascript”>
function appendClick(msg) { // dummy function to prove function is appended to event
document.getElementById(‘debug’).innerHTML = msg;
}
function init() {
var tmp = ”,
sel = document.getElementsByTagName(‘input’), // collection of buttons
currentOnClick,
currentValue;
for (var i=0, len=sel.length; i<len; i++) { // check button collection contents
currentOnClick = sel[i].onclick; // save current onclick event
currentValue = sel[i].value; // remember current value of button
sel[i].onclick = function () { // re-assign onclick event
currentOnClick(); // perform original event
appendClick(currentValue); // append new event function
}
}
}
init();
</script>
</body>
</html>