Div not disappearing despite being clearly told to (javascript)

Question

echo "<div id=\"userinfo\"><p><strong>$username</strong></p><p>Bids: <strong>$bids</strong></div>
            <script>

                var usn = document.getElementById('userstuff');
                menu = document.getElementById('userinfo');
                if (usn) 
                {
                    usn.addEventListener('click',toggle_menu);
                }


                function toggle_menu()
                {
                    alert('clicked');
                    if (menu.style.display == '')
                    {
                        menu.style.display='block';
                    }
                    else if (menu.style.display == 'block')
                    {
                        menu.style.display='';
                    }
                }

            </script>";

This code works on the first click. By default, the display value in menu is set to 'none'. The first click, the user is alerted 'clicked' and the menu becomes visible. However, on more clicks, the user is alerted 'clicked' but the menu does not become invisible and the 'hidden' alert does not show.

I recommend using the Console ( Developer Tool, F12 on Chrome) to see all the errors on a page — Pascal Goldbach, May 20 '16 at 11:54
Assuming `display` is spelled correctly in the actual source, may be a duplicate of http://stackoverflow.com/q/2664045/3903374 — Rick Hitchcock, May 20 '16 at 12:03

Andrew Li · Answer 1 · 2016-10-26T00:14:57.330

Remember that = is for assignment, use == for comparison. Another problem is that checking menu.style.display only checks inline styles of the node, such as:

<div style="display: none"></div>

Thus if the style is not set comparison will fail. '' comparison instead of 'none' works because by default the properties are empty strings if not set, seen here.

A few other recommendations: always declare your variables with var to prevent global scope pollution with many global variables. Here's the final JavaScript:

var usn = document.getElementById('userstuff'),
    menu = document.getElementById('userinfo');

if (usn) {
    usn.addEventListener('click', toggle_menu);
}

function toggle_menu() {
    alert('clicked');

    if(menu.style.display == '' || menu.style.display == 'none') {
        menu.style.display = 'block';
        return;
    } else if (menu.style.display == 'block') {
        menu.style.display = 'none';
        return;
    }
}

Div not disappearing despite being clearly told to (javascript)

1 Answers1