为什么
我正在用JavaScript创建一个计算器。它正在工作，除了add()函数（sub、mult和div工作正常），当我按下"="它在背靠背的弹出窗口中发送两次答案。
Add返回的值就像x和y都是字符串一样，即7+8=78。我如何才能让它计算加法，并只发送一次答案？
计算器.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>
计算器2.js
var x;
var y;
var sign;
var answer;
var equals = document.getElementById("equals");
document.getElementById("0").addEventListener("click", getSign, false);
document.getElementById("1").addEventListener("click", getSign, false);
document.getElementById("2").addEventListener("click", getSign, false);
document.getElementById("3").addEventListener("click", getSign, false);
document.getElementById("equals").addEventListener("click", Calculator, false);
equals.onclick = function(){
Calculator();
}
function getSign(event) {
sign = event.target.id;
}
function add(){
answer = x+y;
}
function sub(){
answer = x-y;
}
function mult(){
answer = x*y;
}
function div(){
if(y==0){
alert("Cannot divide by zero");
return;
}
else{
answer = x/y
}
}
function Calculator(){
x = document.getElementById("x").value;
y = document.getElementById("y").value;
if (sign == 0){
add();
}
else if (sign == 1){
sub();
}
else if (sign == 2){
mult();
}
else {
div();
}
alert(answer);
}
为什么add()函数不起作用
输入元件的value具有String类型。对它们使用+运算符将仅将它们作为字符串添加。为了使它按您的意愿工作，您可以通过Number方法将这些字符串强制转换为Numbers。
var myString = "1";
var castingToNumber = Number(myString);
console.log(myString, castingToNumber); //logs "1" and 1 (notice the quotes)
-运算符之所以不会发生这种情况，是因为无法减去字符串，因此Javascript会自动将这些字符串解析为Numbers，然后对其进行操作。这是不应该依赖的。
两个警报
正如其他答案所指出的，您有两个事件侦听器。建议您删除第二个事件侦听器，并保留通过addEventListener定义的侦听器。这允许您稍后添加更多的事件侦听器，而不会丢失原始侦听器。
由于计算器需要处理数字，因此应该将字符串（从输入字段获得）强制转换为数字类型：
x = Number(document.getElementById("x").value);
y = Number(document.getElementById("y").value);
当然你也可以改变add的功能
function add() {
answer = Number(x) + Number(y);
}
但这更像是一种变通方法。算术运算应该首先对数字进行。
您有两个事件处理程序连接到'='（equals）按钮的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);
}
这将给你正确的总和
在http://jsfiddle.net/Midhun52/sskatgta/1/
您定义了两个事件处理程序，所以这就是代码计算器被调用两次的原因。
document.getElementById("equals").addEventListener("click", Calculator, false);
equals.onclick = function(){
Calculator();
}