Javascript 如何从外部JSON API onclick加载数据（不能使用fetch）_Javascript_Json

Javascript 如何从外部JSON API onclick加载数据（不能使用fetch）

javascript json

Javascript 如何从外部JSON API onclick加载数据（不能使用fetch）,javascript,json,Javascript,Json,我正在尝试创建一个与IE11兼容的网页，它将放在一些用户的桌面上，从JSON API获取一些数据并显示出来用户将在按下按钮之前键入各自的API键，显示API数据请问我的代码哪里出错了？我从控制台收到的错误消息是：“无法获取未定义或空引用的属性'addEventListener'”，因此看起来它甚至没有调用API <script> var btn = document.getElementById("btn"); var apikey = document.getElementBy

我正在尝试创建一个与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>

很可能是在HTML之前将Javascript包含在页面中。由于Javascript在浏览器到达时立即执行，它将查找尚未呈现的

#btn

元素。有两种方法可以解决此问题：

将Javascript移动到

标记的底部，使其在HTML输出到页面后运行

将Javascript包装在

DOMContentLoaded

事件中，该事件将延迟脚本，直到页面完成加载。例如：

window.addEventListener（'DOMContentLoaded'，function（）{
var btn=document.getElementById（'btn'）；
var apikey=document.getElementById（“apikey”）.value；
[...]
});

“您能帮我找出我的代码哪里出了问题吗？”-是什么让您认为出了问题？你需要提供一个清晰的问题陈述。进行调试。在控制台中查找错误消息。在开发人员工具的“网络”选项卡中检查网络请求和响应。等等。对不起，我是新手，我添加了一些额外的细节重复：选项1解决了它！谢谢对不起，我不能投票，我太新了！

<body>
 Enter API key: <input type="text" id="apikey">
 <button id="btn">Click me</button>
 <p id="title"></p>
</body>

{"data":[{"name":"This is the first name"},{"name":"This is the second name"}]}