JavaScript全局变量a为何显示undefined？页面无内容输出问题

嘿，我来帮你拆解下当前遇到的问题，其实有两个核心原因导致了DisplayVar div无内容且控制台提示a为undefined：

1. 脚本执行顺序与DOM元素加载的冲突 #

你放在<body>里的内联脚本写在了<div id="DisplayVar">元素的前面。当浏览器从上到下解析HTML时，会先执行这段脚本，而此时目标div还没有被渲染到DOM树中，document.getElementById("DisplayVar")会返回null。不过这不是a被标记为undefined的直接原因，下面这个才是关键：

2. HTML语法错误导致脚本加载异常 #

看你head中的脚本标签：

<script type="text/javascript" src="js/MyJS.js"></script>;

在闭合的</script>标签后面多了一个多余的分号;，这属于无效的HTML文本。再加上你HTML文档的结尾错误地使用了<html>而非正确的闭合标签</html>，这会干扰浏览器的DOM解析流程，间接导致外部脚本MyJS.js没有被正确加载执行，所以变量a没有被定义，控制台才会提示undefined。

修复后的代码 #

把这些问题修正后，代码就能正常运行了：

<html>
<head>
  <script type="text/javascript" src="js/MyJS.js"></script>
</head>
<body>
  <div id="DisplayVar"></div>
  <script>
    document.getElementById("DisplayVar").innerHTML = a;
  </script>
</body>
</html>

修复要点： #

• 移除了</script>标签后多余的分号
• 将内联脚本移到了目标div元素之后，确保执行脚本时元素已存在于DOM中
• 修正了HTML文档的闭合标签，把最后一行的<html>改为</html>

这样修改后，MyJS.js中的变量a会被正确加载，脚本也能找到目标div并将值渲染进去。

内容的提问来源于stack exchange，提问作者b1az3