There is an issue with some JavaScript code that functions correctly on one website but not on another, even though the code is identical.
The goal of this script is to switch the top navigation to a fa fa-bars Menu when viewed on a mobile device or when the browser window size is reduced.
It successfully works on www.motorsport-tech.com. However, it results in an "Uncaught ReferenceError: myFunction is not defined" error on www.skyforestinn.com.
I have placed this script right before the closing body tag:
<script>
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
// Close the modal when user clicks outside of it
var modal = document.getElementById('ticketModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
To invoke the script in the HTML, I use:
onclick="myFunction()"
Being relatively new to JavaScript, I've looked at multiple solutions for this same issue without success. It's puzzling that the code behaves differently on different websites. Can anyone please assist me in identifying what's incorrect here (besides my lack of expertise) or point me towards the right solution?