如何将所有JavaScript代码移至独立文件而非嵌入HTML？

问题描述 #

我一直尝试将所有JavaScript代码移至独立文件，避免HTML文件过于杂乱。做了个猜数字的练习，把代码移到外部文件用src引入后却没生效，试过onload和初始化函数也没用。想问能不能把所有JS代码全移到外部文件，还是必须在HTML的<script>里留部分代码？

原HTML代码如下：

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>Number guessing game</title>
</head>

<body>
  <h1>Guess a number</h1>

  <p>We have selected a random number between 1 and 10. </p>

  <div class="form">
    <label for="guess">Number: </label>
    <input type="number" min="1" max="100" required id="guess" class="guess">
    <input type="submit" value="Submit guess" class="submit">
  </div>

  <p class="result"></p>

  <script>
    let maxNum = 10;
    let randomNumber = Math.floor(Math.random() * maxNum) + 1;
    const result = document.querySelector('.result');
    const submit = document.querySelector('.submit');
    const guess = document.querySelector('.guess');

    function check() {
      const userGuess = Number(guess.value);

      if (userGuess === randomNumber) {
        result.textContent = 'Congratulations! You got it right!';
        setGameOver();
      } else {
        if (userGuess < randomNumber)
          result.textContent = 'Last guess was too low!';
        else
          result.textContent = 'Last guess was too high!';
      }

      guess.value = '';
      guess.focus();
    }

    submit.addEventListener('click', check);

    function setGameOver() {
      guess.disabled = true;
      submit.disabled = true;
    }
  </script>
</body>

</html>

解决方案 #

完全可以把所有JS代码移到外部文件，问题大概率是DOM还没加载完成，JS就提前执行了，导致获取不到页面元素。按以下步骤操作即可：

1. 创建外部JS文件 #

新建game.js文件，将原<script>内的代码移入，同时调整逻辑确保等DOM加载完成后再执行元素获取和事件绑定：

let maxNum = 10;
let randomNumber = Math.floor(Math.random() * maxNum) + 1;
let result, submit, guess;

// 初始化函数：DOM加载完成后执行
function init() {
  // 此时DOM结构已加载，可正常获取页面元素
  result = document.querySelector('.result');
  submit = document.querySelector('.submit');
  guess = document.querySelector('.guess');
  
  // 绑定按钮点击事件
  submit.addEventListener('click', check);
}

function check() {
  const userGuess = Number(guess.value);

  if (userGuess === randomNumber) {
    result.textContent = 'Congratulations! You got it right!';
    setGameOver();
  } else {
    result.textContent = userGuess < randomNumber ? 'Last guess was too low!' : 'Last guess was too high!';
  }

  guess.value = '';
  guess.focus();
}

function setGameOver() {
  guess.disabled = true;
  submit.disabled = true;
}

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', init);

2. 修改HTML引入外部JS #

将原HTML中的<script>代码块替换为外部文件引入标签，建议放在</body>之前（确保路径正确，若JS文件在子目录需调整src路径）：

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>Number guessing game</title>
</head>

<body>
  <h1>Guess a number</h1>

  <p>We have selected a random number between 1 and 10. </p>

  <div class="form">
    <label for="guess">Number: </label>
    <input type="number" min="1" max="100" required id="guess" class="guess">
    <input type="submit" value="Submit guess" class="submit">
  </div>

  <p class="result"></p>

  <!-- 引入外部JS文件 -->
  <script src="game.js"></script>
</body>

</html>

关键说明 #

• 若之前用onload未生效，可能是绑定方式错误，或JS放在<head>中未等待DOM加载。DOMContentLoaded事件比window.onload更高效，它在DOM结构加载完成后立即触发，无需等待图片等资源加载完毕。
• 确保外部JS文件与HTML文件的路径对应，若JS文件在js子目录，src需改为./js/game.js。

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