Question

我一直在挑战自己，以创建一个使全局变量环境尽可能不受污染的函数，并且在经历了许多“突破”之后（这对我来说是一个新的挑战性课题），我觉得自己碰壁了并开始精疲力尽。

我目前的目标是让formMaths(formula)接受一个表示HTML输入的multiply或divide值的参数，对照条件进行检查，然后返回适当的高阶函数和回调。

好消息是，我能够使公式生效。坏消息是它只返回函数第一个条件下的任何内容的输出。我尝试在onClick属性中为formMaths设置参数，插入与DOM相关的命令，等等……到目前为止还算不错。

到达这一点是一个旅程，我尝试了几种不同的方法，但是它们似乎都不够用。我觉得自己快要到了，但是我已经有一段时间了。我希望看到完成此功能所需的内容以及可以对代码进行的任何改进。

谢谢！

<body>
    <form>
    1st Number: <input type="text" id="firstNum"></br>
    2nd Number: <input type="text" id="secondNum"></br>
    <input type="button" value="multiply" onClick="formMaths()">
    <input type="button" value="divide" onClick="formMaths()">
    <p>The result is: <span id="result"></span></p>
    </form>
</body>

<script>
    function formMaths(formula) {
        let multiAB = (a,b) => {
            return a * b;
        }

        let divideAB = (a,b) => {
            return (a / b);
        }

        function doMaths(callback) {
            let firstNum = parseFloat(document.getElementById("firstNum").value);
            let secondNum = parseFloat(document.getElementById("secondNum").value);
            document.getElementById("result").innerHTML = callback(firstNum, secondNum);
        }

        if (formula = 'multiply') return doMaths(multiAB);
        else if (formula = 'divide') return doMaths(divideAB);
    }
</script>

Answer 1

只需在您的formMaths()调用中添加一个参数，如下所示：

onclick="formMaths(this.id)"

由于此处this对应于单击的按钮，而id对应于按钮的ID（multiply / divide），因此对您有利，并使{ {1}}的工作：

formula

function formMaths(formula) {
  let multiAB = (a, b) => {
    return a * b;
  }

  let divideAB = (a, b) => {
    return a / b;
  }

  function doMaths(callback) {
    let firstNum = parseFloat(document.getElementById("firstNum").value);
    let secondNum = parseFloat(document.getElementById("secondNum").value);
    document.getElementById("result").innerHTML = callback(firstNum, secondNum);
  }

  if (formula == 'multiply') return doMaths(multiAB);
  else if (formula == 'divide') return doMaths(divideAB);
}

我修复的第二件事是在您的<body> <form> 1st Number: <input type="text" id="firstNum"><br> 2nd Number: <input type="text" id="secondNum"><br> <input type="button" value="multiply" id="multiply" onclick="formMaths(this.id)"> <input type="button" value="divide" id="divide" onclick="formMaths(this.id)"> <p>The result is: <span id="result"></span></p> </form> </body>语句中-您仅使用了1个等号。自从您将if设置为formula而不进行测试以来，这每次都使您的数学倍增。我将其更改为2个等号，现在可以使用。

尝试返回特定于DOM输入的函数

1 个答案: