我一直在挑战自己,以创建一个使全局变量环境尽可能不受污染的函数,并且在经历了许多“突破”之后(这对我来说是一个新的挑战性话题),我觉得自己已经陷入困境并开始精疲力尽。
我当前的目标是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>
只需在您的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等号,现在可以使用了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句