I have a clickable span element that is supposed to call a javascript function that toggles a dropdown. This is an amalgum of two w3schools examples linked here.onclick with span elementclickable dropdowns with w3.cssMy code is below, the HTML and JS are inline in the same HTML document. The CSS can be ignored, it is just renamed w3.css stuff (w3- to mxa-).HTML <div class="mxa-dropdown-click"> <span onclick="menu_click("page-menu")"> <span class="mxa-xlarge">☰</span> </span> <div id="page-menu" class="mxa-dropdown-content mxa-bar-block mxa-border" > <a href="/entity/show/42" class="mxa-bar-item"> Show Entity </a> <a href="/record/add/prompt/42" class="mxa-bar-item"> Add Record </a> </div> </div> JS function menu_click(menu_id) { window.alert('i got to here'); var menu = document.getElementById(menu_id); if (menu.className.indexOf("mxa-show") == -1) { menu.className += "mxa-show"; } else { menu.className = menu.className.replace("mxa-show", ""); } } I have edited an example from the w3schools site that to me looks essentially identical to my code but which does work.<!DOCTYPE html> <html> <body> <span id="demo" onclick="myFunction('demo')">Click me to change my text color.</span> <script> function myFunction(arg) { window.alert('i got to here'); document.getElementById(arg).style.color = "blue"; } </script> </body> </html> I never 'get to here' in my code. What could I be doing wrong?

Clickable span not calling javascript even though w3school example works

I have a clickable span element that is supposed to call a javascript function that toggles a dropdown. This is an amalgum of two w3schools examples linked here.

onclick with span element

clickable dropdowns with w3.css

My code is below, the HTML and JS are inline in the same HTML document. The CSS can be ignored, it is just renamed w3.css stuff (w3- to mxa-).

HTML

    <div class="mxa-dropdown-click">
        <span onclick="menu_click("page-menu")">
            <span class="mxa-xlarge">&#9776;</span>
        </span>
        <div id="page-menu" 
            class="mxa-dropdown-content mxa-bar-block mxa-border" 

            >

                <a href="/entity/show/42" class="mxa-bar-item">
                    Show Entity
                </a>

                <a href="/record/add/prompt/42" class="mxa-bar-item">
                    Add Record
                </a>

        </div>
    </div>

    function menu_click(menu_id) {
        window.alert('i got to here');
        var menu = document.getElementById(menu_id);
        if (menu.className.indexOf("mxa-show") == -1) {
            menu.className += "mxa-show";
        } else { 
            menu.className = menu.className.replace("mxa-show", "");
        }
    }

I have edited an example from the w3schools site that to me looks essentially identical to my code but which does work.

<!DOCTYPE html>
<html>
<body>

<span id="demo" onclick="myFunction('demo')">Click me to change my text color.</span>

<script>
function myFunction(arg) {
    window.alert('i got to here');
  document.getElementById(arg).style.color = "blue";
}
</script>

</body>
</html>

I never 'get to here' in my code. What could I be doing wrong?

No answer to this question. Be the first to respond.