我正在尝试创建一个IE11兼容的网页，该网页将位于一些用户的桌面上，它将从JSON API获取一些数据并显示出来。
在按下按钮之前，用户将输入他们各自的API键，显示API数据。
你能帮忙我的代码哪里出了问题吗？我从控制台收到的错误消息是："无法获取未定义或空引用的属性'addEventListener'。"因此，看起来它甚至没有调用API。
<script>
var btn = document.getElementById("btn");
var apikey = document.getElementById("apikey").value
btn.addEventListener("click", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://example.example?&apikey=' + document.getElementById("apikey").value);
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
document.getElementById("title").textContent = ourData.data[0]["name"];
}}}
);
</script>
<body>
Enter API key: <input type="text" id="apikey">
<button id="btn">Click me</button>
<p id="title"></p>
</body>
我试图从中提取名称的API数据看起来像这样：
{"data":[{"name":"This is the first name"},{"name":"This is the second name"}]}
很可能是在HTML之前将Javascript包含在页面中。浏览器一到达Javascript就执行它，它将查找尚未渲染的#btn元素。有两种方法可以解决这个问题：
- 将Javascript移动到
<body>标记的底部，使其在HTML输出到页面后运行 - 将Javascript封装在
DOMContentLoaded事件中，这将推迟脚本，直到页面完成加载。示例如下：
window.addEventListener('DOMContentLoaded', function() {
var btn = document.getElementById('btn');
var apikey = document.getElementById("apikey").value;
[...]
});