Javascript 无法读取null的属性AddEventListener_Javascript_Json_Ajax

Javascript 无法读取null的属性AddEventListener

javascript json ajax

Javascript 无法读取null的属性AddEventListener,javascript,json,ajax,Javascript,Json,Ajax,我正在尝试创建一个没有任何框架的基本单页应用程序，它将为用户提供关于某些主题的教程我发现页面的javascript出现如下错误：未捕获的TypeError:无法读取null的属性“addEventListener” 下面是我用来加载json数据的javascript： var btn = document.getElementById("btn"); btn.addEventListener("click", function(){ var TutRequest = new XMLH

我正在尝试创建一个没有任何框架的基本单页应用程序，它将为用户提供关于某些主题的教程

我发现页面的javascript出现如下错误：

未捕获的TypeError:无法读取null的属性“addEventListener”

下面是我用来加载json数据的javascript：

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代码：

<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未完全加载，请在要将事件附加到的元素准备就绪并加载时，将JS include放在body标记的末尾，如：

<html>
<head>
    <meta name="viewport" content="width=devide-width, initial-scale=1"/>
    <title>SPA Tutorial page</title>
    <link rel="stylesheet" href="css/styles.css">
</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>

    <script src="javaScript.js"></script>
</body> 
</html>

这意味着btn为null，因为document.getElementById返回null。把你的标签放在最后面。谢谢，是的，我刚刚注意到了。起来太久了，哈哈。