'Javascript firing function twice and 1 of 4 functions not working

I'm creating a calculator in JavaScript. It is working, except for the add() function (sub, mult, and div work fine) and when I press "=" it sends the answer twice in back to back pop-ups.

Add returns the value as if both x and y were strings, i.e. 7+8 = 78. How can I get it to calculate add, and to send the answer just once?

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>

calculator2.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);
}
javascripthtmlformsdom-events


Solution 1:[1]

Since your calculator is expected to work with numbers you should cast strings (you get from input field) to number type:

x = Number(document.getElementById("x").value);
y = Number(document.getElementById("y").value);

Of course you could also change add function

function add() {
    answer = Number(x) + Number(y);
}

but this is more like workaround. Arithmetic operations should be done on numbers in first place.

Solution 2:[2]

Why the add() function won't work?

The value of the the input elements has a String type. Using the + operator on them will add them as string only. To make it work as you intend, you cast those strings to Numbers via the Number method.

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

The reason why this doesn't happen with the - operator is that strings can't be subtracted, and thus Javascript automatically parses those strings to Numbers and then operates on them. This should NOT be relied upon.

Two Alerts?

As other answers point out, you have two event listeners. It is recommended that you remove the second event listener, and keep the one defined via addEventListener. This allows you to add more event listeners later, without losing the original ones.

Solution 3:[3]

You have 2 event handlers attached to the clik event of '='(equals) button .Removing event handler one will give you only one alert with answer

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

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

From Calculator.js remove 

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

Also in function add multiply the value with * 1 to consider the input as number's

function add(){
    answer = (x*1)+(y*1);
}

This will give you correct sum

Working Fiddle at http://jsfiddle.net/Midhun52/sskatgta/1/

Solution 4:[4]

You are defining 2 event handlers, so this is why code Calculator is called twice.

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dfsq
Solution 2 user3459110
Solution 3
Solution 4 user1594816

Related Questions