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

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

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

    我一直在挑战自己创造一个尽可能保持全球可变环境不受污染的功能,在经历了许多“突破”(这对我来说是一个新的和具有挑战性的话题)之后,我觉得自己已经撞上了一堵墙,开始被烧坏了。

    我目前的目标是 formMaths(formula) 接受一个表示HTML输入的 multiply divide 值,根据条件检查它,然后返回相应的高阶函数和回调。

    好的,新的是我能使公式生效。坏消息是,它只返回函数第一个条件中的任何内容的输出。我已尝试在中为FormMath设置参数 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>
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   kevin    1 年前

    只需在你的 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个等号。这使你的数学从你开始设置的每一次都成倍增加。 公式 ,而不是测试它。我把它改成了2个等号,现在它起作用了。