外部加载JavaScript失效，内嵌脚本正常运行的技术问题

嘿，我明白你遇到的困扰了——外部引入的JavaScript脚本没生效，但把相同代码内嵌到HTML里就正常运行，对吧？这事儿其实挺常见，问题根源就出在DOM的加载顺序上。

问题原因解析 #

浏览器渲染HTML页面是从上到下逐行解析的。你把<script>标签放在了<body>的最开头，这时候浏览器还没来得及解析后面的<button>和<p>元素呢！所以你的JS代码里document.querySelector("button")和document.querySelector("p")拿到的结果都是null，自然没法给按钮绑定点击事件。

而如果是内嵌脚本，你大概率是把代码放在了这些DOM元素的后面（或者巧合位置刚好对），这时候元素已经被解析出来了，代码就能正常执行。

两种解决方案 #

方案一：调整Script标签的位置

把外部脚本的引用移到<body>的末尾，所有DOM元素之后。这样浏览器解析到脚本时，需要操作的元素已经存在了：

<!DOCTYPE html>
<html>
<body>
  <a href="https://www.google.co.in">My Link</a>
  <img src="logo.png">
  <button>Click Me</button>
  <p>No one Has Clicked yet!</p>
  <!-- 将script移到所有DOM元素之后 -->
  <script type="text/javascript" src="listen.js"></script>
</body>
</html>

方案二：等待DOM加载完成再执行JS代码

修改listen.js里的代码，监听DOMContentLoaded事件，确保DOM树完全加载后再执行逻辑。这样不管脚本放在HTML的哪个位置，都能正常工作：

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector("button");
  var p = document.querySelector("p");
  button.addEventListener("click",function(){
    p.textContent = "Someone Clicked";
  });
});

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