简单的图像隐藏 - "Uncaught TypeError: Cannot set property 'display' of undefined"

Question

这似乎真的很愚蠢，但是我已经阅读了数十个类似的论坛帖子，我只是不知道我在做什么错。

我正在设计一个带有菜单按钮的网站，其图标在打开时会更改为" X"。它在每次点击时都可以切换。JavaScript函数运行，但返回"未定义的typeError：无法设置属性'display'的属性'display'"，当它到达行更改菜单按钮的样式时。

任何想法都将不胜感激。

html：

<img id="menuIconImage" class="menuIcon" src="resources/menu.png" onclick="menuToggle()">
<img id="menuIconImageClose" class="menuIcon" src="resources/close.png" onclick="menuToggle()">

CSS：

.menuIcon {
    position: fixed;
    left: 33px;
    top: 178px;
    width: 35px;
    height: 35px;
    cursor: pointer;
}
#menuIconImageClose {
    //the "close" image/button is hidden by default.
    display: none;
}

javaScript：

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;      
    }
}   

Answer 1

有一个拼写错误的单词'stlye'，在此行中应该是'样式'：

document.getElementById("menuIconImage").stlye.display = "none";

应该是

document.getElementById("menuIconImage").style.display = "none";

我的分析以确定问题始于错误的文本，该错误表明该问题不是找到元素（即document.getElementById("menuIconImage")部分工作）。如果没有找到元素，我们会使用文本Uncaught TypeError: Cannot read property 'style' of null遇到错误。这缩小了问题的位置。