Fatal编程技术网
  • javascript/
  • Javascript触发函数两次，4个函数中的1个不工作

Javascript触发函数两次，4个函数中的1个不工作

javascript html forms

Javascript触发函数两次，4个函数中的1个不工作,javascript,html,forms,javascript-events,Javascript,Html,Forms,Javascript Events,我正在用Javascript创建一个计算器。它正在工作，除了add（）函数（sub、mult和div工作正常），当我按下“=”时，它会在背靠背弹出窗口中发送两次答案 Add返回的值就像x和y都是字符串一样，即7+8=78。我怎样才能让它计算加法，并且只发送一次答案 calculator.html <!DOCTYPE html> <html> <head><title>Calculator</title></head> <

我正在用Javascript创建一个计算器。它正在工作，除了add（）函数（sub、mult和div工作正常），当我按下“=”时，它会在背靠背弹出窗口中发送两次答案

Add返回的值就像x和y都是字符串一样，即7+8=78。我怎样才能让它计算加法，并且只发送一次答案

calculator.html

<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<link rel="stylesheet" type="text/css" href="calc.css"/>
<body>

<p>
    <label for="x">First Number</label>
    <input type="text" name="x" id="x" />
</p>
<p>
    <label for="y">Second Number:</label>
    <input type="text" name="y" id="y" />
</p>

<p>
    <input type=radio name="Operation" value=Add id="0" /> <label for="0">Add</label>
    <input type=radio name="Operation" value=Sub id="1" /> <label for="1">Sub</label>
    <input type=radio name="Operation" value=Mult id="2" /> <label for="2">Mult</label>
    <input type=radio name="Operation" value=Div id="3" /> <label for="3">Div</label>
</p>
<p>
    <input type="button" value="=" id="equals"/>
</p>

<script type="text/javascript" src="calculator2.js"></script>

</body>
</html>
您有两个事件处理程序附加到“=”（等于）按钮的clik事件。删除一个事件处理程序只会给您一个带有答案的警报

document.getElementById("equals").addEventListener("click", Calculator, false);

equals.onclick = function(){
    Calculator();
}
从Calculator.js中删除

equals.onclick = function(){
        Calculator();
    }

在函数添加中，将值与* 1相乘，将输入看作是数字

function add(){
    answer = (x*1)+(y*1);
}
这将给你正确的总数

在

工作时，您有两个事件处理程序连接到“=”（等于）按钮的clik事件。删除一个事件处理程序只会给您一个带有答案的警报

document.getElementById("equals").addEventListener("click", Calculator, false);

equals.onclick = function(){
    Calculator();
}
从Calculator.js中删除

equals.onclick = function(){
        Calculator();
    }

在函数添加中，将值与* 1相乘，将输入看作是数字

function add(){
    answer = (x*1)+(y*1);
}
这将给你正确的总数

在

工作时，您定义了两个事件处理程序，这就是为什么代码计算器会被调用两次

document.getElementById("equals").addEventListener("click", Calculator, false);

equals.onclick = function(){
    Calculator();
}
您定义了两个事件处理程序，这就是为什么代码计算器会被调用两次

document.getElementById("equals").addEventListener("click", Calculator, false);

equals.onclick = function(){
    Calculator();
}
由于您的计算器需要处理数字，您应该将字符串（从输入字段中获取）转换为数字类型：

x = Number(document.getElementById("x").value);
y = Number(document.getElementById("y").value);
当然，您也可以更改
add
函数

function add() {
    answer = Number(x) + Number(y);
}
但这更像是权宜之计。首先应该对数字进行算术运算。

因为您的计算器需要处理数字，所以您应该将字符串（从输入字段中获取）转换为数字类型：

x = Number(document.getElementById("x").value);
y = Number(document.getElementById("y").value);
当然，您也可以更改
add
函数

function add() {
    answer = Number(x) + Number(y);
}
但这更像是权宜之计。首先应该对数字进行算术运算。

为什么
add（）
函数不起作用？ 输入元素的
值
具有
字符串
类型。对它们使用
+
运算符将它们仅作为字符串添加。为了使其按您的意愿工作，您可以通过
Number
方法将这些字符串强制转换为
Numbers

var myString = "1";
var castingToNumber = Number(myString);
console.log(myString, castingToNumber); //logs "1" and 1 (notice the quotes)
使用
-
运算符时不会发生这种情况的原因是字符串不能被减去，因此Javascript会自动将这些字符串解析为
数字，然后对其进行操作。这是不应该依赖的

两个警报？
正如其他答案所指出的，您有两个事件侦听器。建议您删除第二个事件侦听器，并保留通过
addEventListener
定义的事件侦听器。这允许您以后添加更多事件侦听器，而不会丢失原始的事件侦听器。
为什么
add（）
函数不起作用？
输入元素的
值
具有
字符串
类型。对它们使用
+
运算符将它们仅作为字符串添加。为了使其按您的意愿工作，您可以通过
Number
方法将这些字符串强制转换为
Numbers


var myString = "1";
var castingToNumber = Number(myString);
console.log(myString, castingToNumber); //logs "1" and 1 (notice the quotes)


使用
-
运算符时不会发生这种情况的原因是字符串不能被减去，因此Javascript会自动将这些字符串解析为
数字，然后对其进行操作。这是不应该依赖的

两个警报？
正如其他答案所指出的，您有两个事件侦听器。建议您删除第二个事件侦听器，并保留通过
addEventListener
定义的事件侦听器。这允许您以后添加更多事件侦听器，而不会丢失原始的事件侦听器