null addEvenListener 속성을 읽을 수 없음

프레임 워크없이 기본 단일 페이지 응용 프로그램을 만들려고합니다. 사용자에게 특정 과목에 대한 자습서를 제공합니다.null addEvenListener 속성을 읽을 수 없음

나는 페이지의 자바 스크립트 오류를 얻고 다음과 같이

var btn = document.getElementById("btn"); 

btn.addEventListener("click", function(){ 
    var TutRequest = new XMLHttpRequest(); 
    TutRequest.open('GET', 'https://api.myjson.com/bins/iyvun'); 
    TutRequest.onLoad = function(){ 
    var TutData = JSON.parse(TutRequest.responseText); 
    console.log(TutData[2]); 
    }; 
TutRequest.send(); 
})

이 내 HTML입니다 : 여기

Uncaught TypeError: Cannot read property 'addEventListener' of null

내가 JSON 데이터를로드하는 데 사용하는 자바 스크립트입니다 코드 :

<html> 
<head> 
    <meta name="viewport" content="width=devide-width, initial-scale=1"/> 
    <title>SPA Tutorial page</title> 
    <link rel="stylesheet" href="css/styles.css"> 
    <script src="javaScript.js"></script> 
</head> 

<body> 

    <header> 
    <h1>SPA tutorials</h1> 

     <nav role="navigation"> 
      <ul> 
       <li><a href="#the-default-view"><button id="btn">the default view</button></a></li> 
       <li><a href="#some-view"><button id="btn2">some view</button></a></li> 
       <li><a href="#another-view"><button id="btn3">another view</button></a></li> 
      </ul> 


     </nav> 
    </header> 

</body>

,코드의 출력은 JS 코드에 제공된 URL의 json 데이터 여야합니다. 그러나 나는이 오류를 얻으려고 노력하고있는 것으로 보입니다. 이에 대한 도움을 주시면 감사하겠습니다.

: 스크립트 실행, 당신을 넣을 때 요소는 준비와 같은로드 할 수있는 이벤트를 첨부 할 그 때 DOM이 완전히로드되지 않기 때문에 발생

출처

2017-12-04 Adam Hardie

'document.getElementById()'가'null'을 반환했기 때문에'btn'은'null'을 의미합니다. '

null addEvenListener 속성을 읽을 수 없음

관련 문제