Simple Image Hiding--"Uncaught TypeError: Cannot set property 'display' of undefined"

Question

这看起来真的很愚蠢，但我已经阅读了数十篇类似的论坛帖子，但我就是无法弄清楚自己做错了什么。

我正在设计一个带有菜单按钮的网站，该按钮在打开时图标会变为 "X"。它在每次点击时切换。 javascript 函数运行但 returns "Uncaught TypeError: Cannot set property 'display' of undefined" 当它到达将菜单按钮的 style.display 更改为 "none" 的行时。

如有任何想法，我们将不胜感激。

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'，应该是 'style'：

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

应该是

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

我确定问题的分析是从错误文本开始的，该文本表明问题与查找元素无关（即 document.getElementById("menuIconImage") 部分有效）。如果未找到该元素，我们将收到文本 Uncaught TypeError: Cannot read property 'style' of null 的错误。这缩小了问题所在的范围。

Simple Image Hiding--"Uncaught TypeError: Cannot set property 'display' of undefined"

Simple Image Hiding--"Uncaught TypeError: Cannot set property 'display' of undefined"

javascript

css

display