使用HTML dialog替代原生JS confirm实现可复用确认弹窗

run_me_true、run_me_false是clear_data函数内通过var声明的局部变量，作用域仅限clear_data函数内部。HTML内联onclick属性中的代码默认在全局作用域执行，无法访问这两个局部变量，因此点击按钮时会报变量未定义错误，回调无法触发。
另外你当前的实现将回调硬绑定到全局函数，也无法满足可复用弹窗的需求，不同业务场景下的确认/取消逻辑无法灵活配置。

移除HTML内联的onclick属性，通过JS动态绑定事件，将弹窗封装为通用方法，无需将回调暴露到全局作用域，同时实现和原生confirm一致的调用体验。

修正后完整代码 #

HTML部分 #

给弹窗按钮增加标识，移除内联事件：

<!-- CONFIRM DIALOG -->
<div>
<dialog id="confirm_me">
<h3 id="show_confirm"></h3>
 <button id="confirm_ok">OK</button>
 <button id="confirm_cancel">CANCEL</button>
</dialog>
</div>
<!-- END CONFIRM DIALOG-->

JS部分 #

封装通用弹窗逻辑，业务侧只需传入文案和对应回调即可调用：

// 页面加载完成后预先获取弹窗DOM，避免每次打开弹窗重复查询
const confirmDialog = document.getElementById("confirm_me");
const confirmTextNode = document.getElementById("show_confirm");
const okBtn = document.getElementById("confirm_ok");
const cancelBtn = document.getElementById("confirm_cancel");

// 临时存储当前弹窗场景的回调，不暴露到全局
let activeOkCallback = null;
let activeCancelCallback = null;

/**
 * 通用确认弹窗
 * @param {string} message 弹窗提示文案
 * @param {Function} onOk 点击确认的回调
 * @param {Function} onCancel 点击取消的回调
 */
function showConfirm(message, onOk, onCancel) {
  confirmTextNode.textContent = message;
  activeOkCallback = typeof onOk === 'function' ? onOk : null;
  activeCancelCallback = typeof onCancel === 'function' ? onCancel : null;
  confirmDialog.showModal();
}

// 关闭弹窗并清空临时回调
function closeConfirm() {
  confirmDialog.close();
  activeOkCallback = null;
  activeCancelCallback = null;
}

// 统一绑定按钮点击事件
okBtn.addEventListener('click', () => {
  activeOkCallback?.();
  closeConfirm();
});

cancelBtn.addEventListener('click', () => {
  activeCancelCallback?.();
  closeConfirm();
});


// 业务逻辑示例
let foo;
function IT_true () {
  alert("this is true");
  foo = true;
}
function IT_false () {
  alert("this is false");
  foo = false;
}

function clear_data() { 
  foo = false;
  const tipContent = 'ERASE the current player list?';
  // 直接调用通用弹窗即可，无需重复编写弹窗操作逻辑
  showConfirm(tipContent, IT_true, IT_false);
}

方案优势 #

• 无全局变量污染，回调不需要挂载到window对象
• 复用性强，后续所有确认弹窗场景只需调用showConfirm传入对应参数即可，无需重复编写DOM操作、事件绑定代码
• 视图与逻辑分离，HTML中不混杂JS代码，维护成本更低

临时兼容方案（不推荐） #

如果一定要保留原有内联onclick的写法，只需将run_me_true、run_me_false的声明移到全局作用域即可，但这种方式会造成全局变量污染，且不利于后续扩展复用：

// 将变量声明移到全局
var run_me_true, run_me_false;

function clear_data() { 
  foo = false;
  glass = 'ERASE the current player list?';
  document.getElementById('show_confirm').innerHTML = glass;
  run_me_true = IT_true;
  run_me_false = IT_false;
  openCONFIRM();
}

// 其余原有openCONFIRM、closeCONFIRM逻辑保持不变

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