分享
三行代码  ›  专栏  ›  技术社区  ›  kevin

尝试使用高阶函数和回调访问HTML计算器

  •  0
  • kevin  · 技术社区  · 1 年前

    我一直在努力应对W3挑战,我认为我可以写出比他们提供的更好的解决方案。

    我想遵守干法原理,所以我创建了一个用于除法和乘法的回调函数,并为每个回调函数设置了一个hof。但是,由于某种原因,它不能工作,也不会抛出错误。我已经检查了我的代码,到目前为止还没有解决它。

    在一个完美的世界中,HTML输入将是代码的乘法或除法。然而,什么都没有发生。

    有什么想法吗?

    var userMultiply = function() {
      document.getElementById("result").innerHTML = num1 * num2;
    }
    
    var userDivide = function() {
      document.getElementById("result").innerHTML = num1 / num2;
    }
    
    function userMaths(callBack) {
      let num1 = document.getElementById('firstNumber').value;
      let num2 = document.getElementById('secondNumber').value;
    }
    <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>
    </body>
    1 回复  |  直到 1 年前
        1
  •  4
  •   Barmar    1 年前

    几个问题:

    1. 你从不打回电话。
    2. 变量 num1 num2 局部变量是否在 userMaths ,无法从访问它们 userMultiply userDivide . 您应该将它们作为参数传递。

    您还应该将输入转换为数字, parseFloat() . 类算子 * / 自动执行此操作,但添加时会遇到问题 userAdd ,因为 + 将执行字符串连接而不是加法。

    您可能还希望将显示结果的代码移动到 用户数学 因为所有的操作都是一样的。

    var userMultiply = function(num1, num2) {
      return num1 * num2;
    }
    
    var userDivide = function(num1, num2) {
      return num1 / num2;
    }
    
    function userMaths(callBack) {
      let num1 = parseFloat(document.getElementById('firstNumber').value);
      let num2 = parseFloat(document.getElementById('secondNumber').value);
      document.getElementById("result").innerHTML = callBack(num1, num2);
    }
    <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>