In the code HTML+Script below,
- an event handler is attached after page load using
setAttribute(...). - The event hander is passed an argument which is read dynamically too.
- the event hander is attached successfully ( verified by a
getAttribute(...)
However, the handler does not fire.
What is wrong with the snippet below?
<HTML>
<BODY onload="loader();">
<table>
<tbody>
<tr>
<td id="myId">FirstColumn</td>
<td id="otherId">SecondColumn</td>
<td id="lastId">Balderdash</td>
</tr>
</tbody>
</table>
</BODY>
<script language="javascript">
function loader(){
document.getElementById('myId').setAttribute('onmouseover','showMessage("'+document.getElementById('otherId').innerHTML+'");');
alert(document.getElementById('myId').getAttribute('onmouseover'));
document.getElementById('myId').setAttribute('onmouseout','alert(\"'+document.getElementById('otherId').innerHTML+'\");');
alert(document.getElementById('myId').getAttribute('onmouseout'));
document.getElementById('lastId').setAttribute('onmouseout','alert("hohoho");');
alert(document.getElementById('lastId').getAttribute('onmouseout'));
function showMessage( aMessage ){
alert(aMessage);
}
</script>
</HTML>