You are forming the onclick attribute with invalid syntax, change the inner double quotes to single quotes.
Change
<span onclick="menu_click("page-menu")">
To
<span onclick="menu_click('page-menu')">
OR: With double quotes inside the single quotes
<span onclick='menu_click("page-menu")'>
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", "");
}
}
<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>
All are same except onclick quote .check your quotes on onclick call
onclick="menu_click('page-menu')"
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", "");
}
}
<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>
I noticed that you are calling function error. Just replace these line of code.
Hope it will help you.
<span onclick="menu_click('page-menu')">
<span class="mxa-xlarge">☰</span>
</span>
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">☰</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?
Use single quotes like this onclick=”menu_click(‘page-menu’)”.
Thanks all so much, I was too close to it and couldn’t see.
