我使用基本的html和javascript,它在我的任何浏览器或其他计算机上都不起作用。我得到TypeError:document.getElementById(...)是空的。
不过,当我使用开发工具/控制台时,它可以工作。我找不到 im 写的东西有什么问题,所以我尝试了几种不同的方法,但都因相同的错误而失败。
<!doctyp html>
<html>
<head>
<title>Simple JSON</title>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</head>
<body>
<ul id="links">
</ul>
</body>
</html>
问题是你的javascript在head元素中,并且在正文中的实际元素准备好之前被执行。将其放在内容准备就绪时调用的事件中
document.addEventListener("DOMContentLoaded", function(event) {
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
});
您的脚本在页面完成加载之前正在运行,因此在执行时,ID 为 links
的元素尚不存在。将脚本移动到页面底部,它应该可以正常工作。
<html>
<head>
<title>Simple JSON</title>
</head>
<body>
<ul id="links">
</ul>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</body>
</html>
试着把你的<script>
标签放在正文的底部。你得到空错误的原因是因为你的javascript代码执行时<ul>
标签还没有初始化。
HTML是一种解释型语言。您需要将 JavaScript 代码放在<ul>
标记的闭包之后,或者更一般地放在</body>
之前