간단한 이미지 숨기기 - "Uncaught TypeError : 정의되지 않은 'display'속성을 설정할 수 없습니다.

Question

이것은 정말 어리석은 일입니다. 그러나 수십 개의 유사한 포럼 게시물을 읽었으므로 잘못된 것 .

나는 열 때 아이콘이 "X"로 변경되는 메뉴 버튼이있는 웹 사이트를 디자인하고 있습니다. 클릭 할 때마다 토글됩니다. javascript 함수가 실행되지만 "Uncaught TypeError : 메뉴 막대의 style.display를"none "으로 변경하는 줄에 도달하면 undefined의 '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; 
} 

자바 스크립트 :

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에 오류가 발생합니다. 문제가 발생한 부분이 좁혀졌습니다.