开发分步测验模态框时，向JavaScript函数传递选择器遇阻

我一眼就看到你代码里的核心问题啦，咱们一步步来修复：

问题根源 #

你的quizGo函数里，参数是name，但又用var name = document.getElementById(name);重新声明了同名变量——这会直接覆盖传入的参数值，导致后续获取元素和调用模态框方法全部失效。另外如果是用Bootstrap这类框架的模态框，还要确保调用正确的显示逻辑。

修正后的完整代码 #

JavaScript 部分

function quizGo(targetModalId) {
  // 先关闭所有已打开的模态框（根据你用的框架选对应写法）
  // 如果你用的是 Bootstrap 3/4（依赖jQuery）：
  $('.modal').modal('hide');
  
  // 如果你用的是 Bootstrap 5+（原生JS）：
  // document.querySelectorAll('.modal.show').forEach(modal => {
  //   const modalInstance = bootstrap.Modal.getInstance(modal);
  //   modalInstance.hide();
  // });

  // 获取目标模态框并显示
  const targetModal = document.getElementById(targetModalId);
  console.log(targetModal);
  
  // Bootstrap 3/4 调用方式：
  $(targetModal).modal('show');
  
  // Bootstrap 5+ 调用方式：
  // const modalInstance = new bootstrap.Modal(targetModal);
  // modalInstance.show();
}

HTML 部分（你的原有结构无需改动）

<button id="quiz1Back" onclick="quizGo('quizModal0')">Back</button>
<button id="quiz1Next" onclick="quizGo('quizModal2')">Next</button>
<div class="modal" id="quizModal2" role="dialog">
  <!-- 这里放模态框的内容 -->
</div>

关键修复细节 #

• 把函数参数名从name改成targetModalId，彻底避免变量命名冲突，代码可读性也更强。
• 补充了完整的模态框关闭逻辑，确保切换时不会出现多个模态框叠加的情况。
• 根据不同Bootstrap版本提供了对应的显示方法，你可以根据自己的项目情况选择。

另外给个小优化建议：尽量避免内联onclick事件，改成事件监听会更利于代码维护，比如：

// 把这部分代码放在页面加载完成后执行
document.getElementById('quiz1Back').addEventListener('click', () => quizGo('quizModal0'));
document.getElementById('quiz1Next').addEventListener('click', () => quizGo('quizModal2'));

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