JavaScript在Firefox Scratchpad可运行，本地HTML引入却无法执行的解决方法

嘿，我懂你遇到的困扰——本地打开关联了JS的HTML文件时，script.js里的代码完全没反应，但复制到Firefox Scratchpad或者在Stack Overflow上运行就正常，对吧？这大概率是DOM加载顺序搞的鬼，咱们来一步步搞定它：

问题根源 #

你的script标签放在了<head>里，浏览器会优先加载并执行这里的脚本。但这时候<body>里的<input id="myInput">元素还没被渲染出来，所以document.getElementById("myInput")返回的是null，autocomplete函数里的监听逻辑自然就没法触发啦。

三种简单解决方案 #

方案1：把script标签移到末尾 #

这是最直观的方法，等所有DOM元素都加载完再执行脚本：

<body>
  <div>
    <div>
      <h2>Input Tester</h2>
      <p>Enter text into the field to test</p>
      <form class="autocomplete" autocomplete="off">
        <div class="wrapper">
          <input id="myInput" type="text" name="myCountry" placeholder=" Search Hotels">
          <button type="button">Search</button>
        </div>
      </form>
    </div>
  </div>
  <!-- 把脚本移到body结束前 -->
  <script src="script.js" type="text/javascript"></script>
</body>

方案2：给script标签加defer属性 #

如果不想移动脚本位置，给<script>加上defer属性，它会告诉浏览器“等DOM加载完再执行这个脚本”：

<head>
  <link rel="stylesheet" href="styles.css">
  <!-- 添加defer属性 -->
  <script src="script.js" type="text/javascript" defer></script>
  <title>Autocomplete Test</title>
</head>

方案3：在脚本里监听DOMContentLoaded事件 #

修改你的script.js，把调用autocomplete的代码放在DOM加载完成的回调里，确保元素已经存在：

function autocomplete(inp) {
  if (inp) {
    inp.addEventListener("input", function(e) {
      console.log("We have input! - " + inp.value);
    });
    inp.addEventListener("keydown", function(e) {
      console.log("We have keydown! - " + e.keyCode);
    });
  }
}

// 等待DOM完全加载后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
  autocomplete(document.getElementById("myInput"));
});

验证方法 #

修改完成后，打开你的HTML文件，按下F12打开浏览器开发者工具的「Console」标签，在输入框里输入内容，要是能看到We have input! - xxx这类日志，就说明脚本正常执行啦~

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