The Front End - Javascript Puzzler

The best minds from Teradata, our partners, and customers blog about relevant topics and features.
Teradata Employee

The following code works fine on most browsers but IE has a problem with it. Can you figure it out?

<body onload="addClickHandler()">
<button id="myButton">Click Me</button>

function clickHandler(){

function addClickHandler(){
myButton = document.getElementById("myButton");
myButton.onclick = clickHandler;

Stay tuned to this blog for more puzzlers and pitfalls, useful tools, library evaluations, articles and tips related to javscript and front end development. Answer will be published soon.

Teradata Employee
in the function addClickHandler()
Declare the variable myButton in the following way : var myButton. It will work in IE too.

Try this :


<SCRIPT><BR />function clickHandler(){<BR /> alert('hi');<BR />}<BR /><BR />function addClickHandler(){<BR /> var myButton = document.getElementById("myButton");<BR /> myButton.onclick = clickHandler;<BR />}<BR /></SCRIPT>

Not applicable
Without explaining why IE has a problem (I'll leave that for zizz), I'll just say that IE is trying to be clever. Their javascript handling has always had ways to try and make it "easier" for programmers, but in so doing has created inconsistencies with other browsers.