HTML内嵌JS与外部JS脚本差异及滑块输出失效问题求助

问题重现 #

你的HTML代码（index.html）：

<script src="js.js"></script>

<label for="max-invite">Select maximum number of invitations</label>
<input type="range" name="max-invite" id="max-invite" min="1" max="30" value="10" step="1">
<output class="invite-output" for="max-invite"></output>

外部JS代码（js.js）：

const invite = document.querySelector('#max-invite');
const output = document.querySelector('.invite-output');

document.addEventListener('DOMContentLoaded', function(){
  output.textContent = invite.value;
}) 

invite.addEventListener('input', function() {
  output.textContent = invite.value;
});

问题原因 #

外部JS脚本在DOM元素加载之前就执行了。浏览器解析到<script src="js.js"></script>时会立即加载并执行脚本，此时<input id="max-invite">和<output class="invite-output">还未被解析，document.querySelector返回null，后续的事件绑定与赋值自然失效。

而你之前的内嵌JS能正常工作，大概率是因为内嵌代码放在了DOM元素之后，或者刚好利用了DOMContentLoaded等待DOM加载完成，避开了这个时机问题。

内嵌JS与外部JS的核心差异 #

两者本质功能无差异，核心区别在加载执行时机和代码组织性：

• 执行时机：不管内嵌还是外部脚本，默认都是浏览器解析到它们时立即执行，执行时机完全取决于脚本标签在HTML中的位置。
• 代码组织：外部JS更利于代码复用和维护，内嵌JS适合与当前DOM强绑定的简单小逻辑。

修改方案 #

有两种可靠的修改方式：

方式1：将脚本标签移到DOM末尾 #

把<script src="js.js"></script>放到</body>标签前，确保所有DOM元素解析完成后再执行脚本：

<label for="max-invite">Select maximum number of invitations</label>
<input type="range" name="max-invite" id="max-invite" min="1" max="30" value="10" step="1">
<output class="invite-output" for="max-invite"></output>

<script src="js.js"></script>
</body>

方式2：将所有DOM操作逻辑放入DOMContentLoaded回调 #

修改js.js文件，把获取元素、赋值、绑定事件的操作都放在DOM加载完成的回调内：

document.addEventListener('DOMContentLoaded', function(){
  const invite = document.querySelector('#max-invite');
  const output = document.querySelector('.invite-output');
  
  output.textContent = invite.value;

  invite.addEventListener('input', function() {
    output.textContent = invite.value;
  });
});

这样即使脚本放在DOM前面，也会等整个DOM树构建完成后再执行内部逻辑，能正确获取到目标元素。

内容的提问来源于stack exchange，提问作者Jee Hung Mah