无法显示 JSON 错误 - 类型错误:document.getElementById(..) 为空



我使用基本的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>之前