如何实现两个按钮分别打开不同的dialog对话框？

你的核心问题是当前代码只处理了一个按钮和一个对话框，button2没有对应的事件逻辑来触发它的目标弹窗。以下是修正方案：

修正后的HTML代码 #

<button class="o">How To Make MadLibs in JS</button>
<button class="o2">打开Hello World弹窗</button>

<dialog class="dialog-madlibs">
  <p>I am a dialog box.</p>
  <button class="c">关闭</button>
</dialog>

<dialog class="dialog-hello">
  <p>Hello World</p>
  <button class="c">关闭</button>
</dialog>

修正后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取各元素
  const dialogMadlibs = document.querySelector('.dialog-madlibs');
  const dialogHello = document.querySelector('.dialog-hello');
  const btnOpenMadlibs = document.querySelector('.o');
  const btnOpenHello = document.querySelector('.o2');
  const closeButtons = document.querySelectorAll('.c');

  // 绑定第一个按钮的弹窗触发
  if (btnOpenMadlibs) {
    btnOpenMadlibs.addEventListener('click', () => dialogMadlibs.show());
  }

  // 绑定第二个按钮的弹窗触发
  if (btnOpenHello) {
    btnOpenHello.addEventListener('click', () => dialogHello.show());
  }

  // 统一处理所有关闭按钮
  closeButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      btn.closest('dialog').close();
    });
  });

  // 处理打印按钮逻辑（如果需要保留）
  const printBtn = document.querySelector('.p');
  if (printBtn) {
    printBtn.addEventListener('click', () => {
      window.print();
      printBtn.closest('dialog').close();
    });
  }
});

关键说明 #

1. 给每个对话框添加唯一类名，确保能精准获取对应元素；
2. 为button2分配独立类名，并添加点击事件绑定到对应的对话框；
3. 使用closest('dialog')让关闭按钮自动找到所在的对话框，避免重复写关闭逻辑；
4. 改用addEventListener绑定事件，比直接赋值onclick更灵活，避免覆盖问题。

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