Question

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

我的页面javascript出现错误，如下所示：

未捕获TypeError：无法读取属性'addEventListener'为null

这是我用来加载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数据，但我似乎只会在我正在尝试的任何内容中得到此错误。对此有任何帮助表示赞赏。

Answer 1

这是因为当脚本运行时DOM没有完全加载，当你想要附加事件的元素准备好并加载时，将JS包含在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>

无法读取null的属性addEvenListener

1 个答案: