单HTML页面第二个搜索栏JavaScript功能失效问题求助

第二个搜索栏行为异常是顶层JavaScript变量重复声明导致第二个脚本块完全未执行导致的：

• 两段独立的<script>块都在全局顶层作用域用const声明了同名变量f、q、google，以及同名事件处理函数submitted
• 浏览器解析第二个脚本块时，会直接抛出Uncaught SyntaxError: Identifier 'f' has already been declared语法错误，第二个脚本块内的所有代码（包括第二个表单的submit事件绑定逻辑）都不会执行
• 第二个表单没有绑定自定义提交逻辑，触发提交时会走原生默认行为：由于表单未设置action属性，默认向当前页面地址发起提交，输入框配置了name="q"，搜索内容就会作为查询参数拼接到当前站点域名后，和你观察到的现象完全一致
• 第一个搜索栏能正常运行，是因为第一个脚本块在重复声明的语法错误触发前就已经执行完成，事件绑定成功，不受第二个脚本报错的影响

以下两种方案任选其一即可：

方案1：修改第二个脚本的变量名，避免命名冲突 #

将第二个脚本块内的变量、函数名改为和第一个脚本不重复的命名即可，示例代码：

<script>
  const f2 = document.getElementById('form2');
  const q2 = document.getElementById('query2');
  const googleSearch = 'https://www.google.com/search?q=';

  function submittedForm2(event) {
    event.preventDefault();
    const url = googleSearch + '+' + q2.value;
    const win = window.open(url, '_blank');
    win.focus();
  }

  f2.addEventListener('submit', submittedForm2);
</script>

方案2：用立即执行函数隔离作用域（推荐） #

把每段脚本的逻辑包裹在立即执行函数中，让所有变量成为函数内部的局部变量，从根源上避免跨脚本的命名冲突，不需要手动修改变量名。两个搜索栏的脚本都可以按如下结构改造，仅需要修改对应获取元素的ID即可：

<script>
;(function() {
  // 第二个脚本这里把getElementById的参数改成对应ID：form2、query2
  const f = document.getElementById('form');
  const q = document.getElementById('query');
  const google = 'https://www.google.com/search?q=';

  function submitted(event) {
    event.preventDefault();
    const url = google + '+' + q.value;
    const win = window.open(url, '_blank');
    win.focus();
  }

  f.addEventListener('submit', submitted);
})()
</script>

修复后打开浏览器开发者工具的控制台面板，提交第二个搜索栏时不会再出现变量重复声明的报错，会正常在新窗口打开谷歌搜索结果页。

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