I'm facing a bit of a dilemma and after scouring through numerous forum posts, I still can't seem to pinpoint the issue.
The challenge at hand involves designing a website with a menu button that transforms into an "X" when clicked, toggling back and forth with each click. While the javascript function appears to be functioning, there's an error message saying "Uncaught TypeError: Cannot set property 'display' of undefined" upon trying to change the menu button's display style to "none".
Any insights or suggestions would be greatly appreciated.
Here are snippets of the code:
<img id="menuIconImage" class="menuIcon" src="resources/menu.png" onclick="menuToggle()">
<img id="menuIconImageClose" class="menuIcon" src="resources/close.png" onclick="menuToggle()">
And here's a glimpse of the CSS:
.menuIcon {
position: fixed;
left: 33px;
top: 178px;
width: 35px;
height: 35px;
cursor: pointer;
}
#menuIconImageClose {
//By default, the "close" image/button is hidden.
display: none;
}
Lastly, let's take a look at the Javascript snippet:
var menuState = 0;
function menuToggle() {
"use strict";
if (menuState === 0) {
document.getElementById("menuIconImage").stlye.display = "none";
document.getElementById("menuIconImageClose").style.display = "block";
menuState = 1;
} else if (menuState === 1) {
document.getElementById("menuIconImageClose").style.display = "none";
document.getElementById("menuIconImage").style.display = "block";
menuState = 0;
}
}