JS运行报randFilmIndex重复声明语法错误的原因排查

你的randomize-film.js脚本在HTML中被重复引入了两次：

• 第一处位于<head>标签内部
• 第二处位于文档末尾</html>标签前

使用let声明的变量不允许在同一作用域下重复定义。脚本第一次加载执行时，已经在全局作用域声明了randFilmIndex、randFilm变量，第二次加载同个脚本时会重复执行声明逻辑，直接触发Identifier 'randFilmIndex' has already been declared语法错误。

另外你把脚本放在<head>中加载时，页面DOM还未渲染完成，document.getElementById('option1')会获取到空值，即使解决重复声明问题也会触发后续DOM操作错误。

1. 删除<head>标签内的randomize-film.js引入标签，仅保留</body>前的那处脚本引入，保证脚本执行时页面DOM已经加载完成。
2. （可选优化）给filmList变量加上声明关键字，避免意外污染全局作用域，将filmList = ['film1', 'film2', 'film3'];修改为const filmList = ['film1', 'film2', 'film3'];即可。

修复后的HTML脚本引入部分参考：

<body>
  <center>
    <h1 class="title">Rotten Tomatoes Game</h1>
    <a href="rules.html"><h3>Click here to learn the rules</h3></a>
    <ul class="buttons">
      <a href="you-picked-x-film.html"><li id="option1">Option 1</li></a>
      <a href="you-picked-x-film.html"><li id="option2">Option 2</li></a>
    </ul>
  </center>

  <script src="script.js"></script>
  <!-- 仅保留这一处随机选片脚本引入 -->
  <script src="scripts/randomize-film.js"></script>
</body>
</html>

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