display:none; displays 'none' in browser

Question

This jsFiddle example works in Google Chrome, but in Internet Explorer then when the close icon is clicked the browser removes the pop-up element but results in the text 'none' being displayed in the browser window. Please explain how I can resolve this issue.

HTML:

<div id="popup">
    <!-- Close popup link -->
    <a href="javascript:document.getElementById('popup').style.display='none';">X</a>
</div>

Answer 1

Use onclick for the event handler instead of href http://jsfiddle.net/AE2X3/4/

<div id="popup">
        <a href="#" onclick="document.getElementById('popup').style.display='none';return false;" id="close_popup"></a>
        <p>This is a pop-up.</p>
</div>

Answer 2

I think what's happening is that the assignment is returning its result, and the browser is then displaying that. If you add void(0) to the end of your JavaScript, it won't be displayed.

Let me add that amit_g's answer is more correct than mine. He correctly points out that this sort of behaviour belongs in the OnClick handler, not in the href attribute.