如何实现window.prompt仅在按钮点击时弹出并修复非法调用报错

两个异常分别对应两处代码逻辑错误：

• 保存/页面加载就自动弹prompt：代码末尾直接在全局作用域执行了problemSolve()，函数内的prompt调用会在脚本一运行就触发——不管是页面首次加载，还是CodePen保存后重跑脚本，都会直接弹窗，完全没等按钮点击。
• 「illegal invocation」非法调用报错：代码里写了document.getElementById('bgnBtn').onclick = alert;，把window上的原生alert方法直接裸赋值给事件处理器，调用时会丢失window上下文，浏览器要求这类原生方法必须绑定window上下文执行，脱离上下文直接调用就会抛出这个错误；而且这行逻辑写反了位置——你要的是点按钮跑计算，不是计算完给按钮绑个弹alert的事件。

另外原HTML里的script标签src是无效值，src="function problemSolve() {.js"根本不是合法的脚本路径，会加载失败。

• 删掉全局位置直接调用的problemSolve()，不要在脚本加载阶段就执行计算逻辑
• 把按钮事件绑定移到计算函数外面，等DOM渲染完成后，给按钮绑定点击事件，点击时再触发计算函数
• 删掉函数末尾错误的onclick = alert赋值逻辑，如果需要弹窗提示计算结果，用匿名函数包裹alert，就能避免上下文丢失的问题
• 删掉带错误src的script标签，CodePen环境直接把JS代码放到JS面板即可，不需要手动写script引入。

HTML #

<button id="bgnBtn">Start calculator</button>

JS #

function problemSolve() {
  let a = window.prompt("first number: ");
  let b = window.prompt("second number: ");
  let method = window.prompt("Choose how to solve: ");
  // 补个类型转换，避免加法时出现字符串拼接的问题（比如输入1和2得到'12'而非3）
  a = Number(a);
  b = Number(b);
  let result;
  switch (method) {
    case 'divide':
      result = a / b;
      break;
    case 'multiply':
      result = a * b;
      break;
    case 'add':
      result = a + b;
      break;
    case 'subtract':
      result = a - b;
      break;
    default:
      result = '请输入有效的计算类型：divide/multiply/add/subtract';
  }
  console.log('计算结果：', result);
  alert(result);
}

// 给按钮绑定点击事件，点击才触发计算
document.getElementById('bgnBtn').addEventListener('click', problemSolve);

提示：如果是在独立HTML文件中写代码，要把script标签放到button元素后面，或者把绑定逻辑放在DOMContentLoaded事件回调里，避免DOM还没渲染完就获取元素，返回null导致绑定失败。

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