gpt4 book ai didi

javascript - 尝试使用事件监听器在 javascript 中实现 5 个函数计算器

转载 作者:行者123 更新时间:2023-11-28 17:18:03 24 4
gpt4 key购买 nike

<html>
<head>
<title>JS Operator</title>

<script>
function calculate(num1, num2, op){
switch (op){
case '+' : return num1 + num2

case '-' : return num1 - num2

case '*' : return num1 * num2

case '/' : return num1 / num2

case '%' : return num1 % num2
}
}
</script>
</head>

<body>
<input id="num1" type="number" placeholder="Enter first number" name="num1"/> <br/><br/>
<input id="num2" type="number" placeholder="Enter second number" name="num2"/> <br/><br/>
<input id="op" type="text" placeholder="Enter operator" name="op"/> <br/><br/>

<button id="calculate" name="calculate"> Calculate </button><br/>

<p id="result">Result: </p>

<script>
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var op = document.getElementById("op").value;

document.getElementById("calculate").addEventListener("click", function(){
document.getElementById("result").innerHTML = "Result: "
document.getElementById("result").innerHTML+= calculate(num1, num2, op)
})

</script>
</body>

这是我编写的代码,不确定哪里出了问题,但是点击计算按钮后,结果显示未定义。我还尝试使用 parseInt() 作为 2 个数值,但这不起作用,尽管当我尝试使用alert() 打印 3 个变量的值时,它给出了与输入相同的值。请帮助某人解决错误所在。

最佳答案

您的代码有两个(常见!)问题:

  1. 请将 .value() 调用放入事件监听器中!
  2. .value() 调用封装在 Number(...) 中,以便加法是数字加法,而不是字符串连接。

以下是代码底部脚本的一种可能外观:

const num1Box = document.getElementById("num1");
const num2Box = document.getElementById("num2");
const opBox = document.getElementById("op");
const resultArea = document.getElementById("result");

document.getElementById("calculate").addEventListener("click", () => {
const x = Number(num1Box.value);
const y = Number(num2Box.value);
const op = opBox.value;
resultArea.innerHTML = `Result: ${calculate(x, y, op)}`;
});

关于javascript - 尝试使用事件监听器在 javascript 中实现 5 个函数计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53028924/

24 4 0
文章推荐: javascript - 尝试用
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com