使用高阶函数与回调实现HTML计算器遇故障求助

嘿，你的DRY原则思路很赞，但代码里有两个核心问题导致点击按钮没反应，我一步步给你拆解：

问题1：高阶函数根本没执行回调 #

你写的userMaths函数只是获取了输入框的值，但从来没调用传入的callBack函数！这就好比你雇了个工人（回调），却没让他干活，自然没结果。

问题2：变量作用域不匹配 #

userMultiply和userDivide里的num1、num2是全局作用域的，但你在userMaths里用let定义的是局部变量，回调函数根本访问不到这些局部值，就算执行了回调也拿不到正确的数字。

额外小坑：输入值是字符串类型 #

输入框的value默认是字符串，直接做运算可能会出意外（比如空输入会得到NaN），最好显式转成数字。

具体排查步骤（通用思路） #

1. 先确认函数是否被触发：在userMaths里加一行console.log("userMaths执行了")，点击按钮后打开浏览器控制台（F12）看有没有输出——如果有，说明按钮绑定没问题；如果没有，检查onClick的函数名是否拼写错误。
2. 检查变量取值是否正确：在userMaths里打印num1和num2，看是不是拿到了输入的内容，有没有转成数字。
3. 确认回调是否被调用：在userMaths里手动调用callBack()，并检查回调里的变量是否能正确获取。

修复后的完整代码 #

// 回调函数改为接收参数，不再依赖全局变量
var userMultiply = function(num1, num2) { 
  document.getElementById("result").innerHTML = num1 * num2; 
}

var userDivide = function(num1, num2) { 
  // 增加除以0的判断，避免错误
  if (num2 === 0) {
    document.getElementById("result").innerHTML = "错误：不能除以0";
    return;
  }
  document.getElementById("result").innerHTML = num1 / num2; 
}

// 高阶函数负责获取、校验输入，然后调用回调并传参
function userMaths(callBack) { 
  // 把输入值转成浮点数
  let num1 = parseFloat(document.getElementById('firstNumber').value);
  let num2 = parseFloat(document.getElementById('secondNumber').value);
  
  // 校验是否为有效数字
  if (isNaN(num1) || isNaN(num2)) {
    document.getElementById("result").innerHTML = "请输入有效的数字";
    return;
  }
  
  // 关键：调用回调并传入处理好的数字
  callBack(num1, num2);
}

HTML部分保持不变即可：

<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="userMaths(userMultiply)" Value="Multiply" />
<input type="button" onClick="userMaths(userDivide)" Value="Divide" />
<p>The result is: </p>
<span id="result"></span>
</form>

这样修改后，点击按钮就能正常执行运算，还增加了输入校验和除以0的错误提示，比官方示例更健壮～

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