时间戳

首页 > 解决方案 > 尝试返回特定于 DOM 输入的函数

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

问题描述

我一直在挑战自己创建一个函数，使全局变量环境尽可能不受污染，经过大量“突破”（这对我来说是一个新的和具有挑战性的话题）我觉得我已经碰壁了，开始了被烧毁。

我目前的目标是formMaths(formula)获取一个代表 HTML 输入multiply或divide值的参数，根据条件检查它，然后返回适当的高阶函数和回调。

好消息是我能够让公式起作用。坏消息是它只返回函数第一个条件的输出。我已经尝试在属性中为 formMaths 设置参数onClick，插入 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>

标签： javascripthtmlcss

解决方案

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

onclick="formMaths(this.id)"

因为这里this对应于单击的按钮和按钮id的 ID ( multiply/ divide)，所以这将对您有利并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>

我修复的第二件事是在你的if陈述中——你只使用了 1 个等号。formula自从您设置为 后，这使您的数学每次都成倍增加multiply，而不是对其进行测试。我将其更改为 2 个等号，现在它可以工作了。

推荐阅读