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

凯文

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

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

好消息是,我能够使公式生效。坏消息是它只返回函数第一个条件下的任何内容的输出。我试过在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>
杰克·巴什福德

只需在您的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个等号。自从您将设置formulamultiply,而不是对其进行测试以来,这每次都使您的数学倍增我将其更改为2等号,现在可以使用了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

应用特定于组的函数以返回单个序列

返回特定于类的枚举

使用熊猫输入特定于类型的输出

返回特定于每列的多个表

Snakemake:访问输入函数返回的列表的特定元素

尝试实现特定于Django模型属性的更多阅读按钮

尝试使用返回三个值的函数作为采用3个值的函数的输入

加载的OpenGL函数是特定于上下文还是特定于线程的?(视窗)

PHP函数返回输入

尝试在特定行输入字符

使用Firebase自动生成的密钥返回特定于帖子的数据

从特定于平台的(UWP)PageRenderer导航并返回到PCL页面

确保函数线程安全:特定于线程的数据与互斥锁

无法重置分区组(特定于Window函数和PostgreSQL)

特定于体系结构的Golang函数的文档

C ++内联函数和特定于上下文的优化

调用特定于类型的函数的有效方法

Make:函数中特定于目标的变量分配

无论 Python 中的输入如何,返回特定字母出现的索引的函数总是不返回任何内容?

如何使用 R 的优化、优化函数等来查找提供特定返回值的函数输入?

(特定于IE)如何确定输入的文本是否长于输入元素的宽度

如何从函数返回输入标签?

函数对任何输入返回 0

c++返回输入函数

尝试连接到本地主机时获取与网络相关或特定于实例的信息

我正在尝试使用 python selenium 启动特定于 chrome 的配置文件?

我正在尝试创建一个 javascript 函数,该函数使用通过 HTML 输入的值并返回一个函数

获得更有针对性的基于条件类型的函数签名,尝试根据输入缩小到特定输出

特定于案例的混合?