JavaScript onclick event not working in IE9 and below

Question

As Foundation 5 does not support IE8, I am showing a warning message to upgrade the browser with CSS ( display:inline; ) in conditional tags <!--[if lt IE 9]> , which is hidden on all other browsers ( display:none; ). This works as intended. The markup of the message is placed in the body:

<div id="ie8warning" class="ie8warning">
   <div>This site does not support <b>Internet Explorer 7 and 8.</b>
   <div id="closewarning">×</div>
   </div>
 </div>

Now, the message contains a small 'X' ( <div id="closewarning">×</div> ), which should close the window, when it is clicked. I wrote the following JavaScript, which works in all modern browsers. However, the onclick -event is obviously not recognized in IE9 and below. IE9 is not important as the message will not show up, but IE8 and below are essential:

function closeWarning() {
   var ie8Warning = document.getElementById('ie8-warning');
   ie8Warning.style.display = 'none';
}

var ie8Button = document.getElementById('closewarning');
ie8Button.onclick = closeWarning;

Would appreciate your advice how to get this working in pure JavaScript.

Answer 1

IE8 is a HTML4 browser, hyphens in id s are not allowed. An id in HTML4 browsers can contain any alphanumeric string that begins with a letter. The underscore (_) can also be used.