having issues with javascript calculator

Question

trying to create a javascript calculator for a project. I am not so good with javascript please help. I have no errors and nothing is displaying. Maybe something with the event listener..? Here's my script:

$(function () {
    "use strict";
    var num1, num2, answer, operation = 0;

    var add = function (num1, num2) {
        var sum = num1 + num2;
        return sum;
    };
    var subtract = function (num1, num2) {
        var diff = num1 - num2;
        return diff;
    };
    var multiply = function (num1, num2) {
        var product = num1 * num2;
        return product;
    };
    var divide = function (num1, num2) {
        var quotient = num1 / num2;
        return quotient.toFixed(4);
    };

    $(".button").click(function () {
        var value = document.getElementById(this);
        switch (value) {
            case "zero":
                if (typeof(operation) == "string") {
                    num2 = 0;
                } else {
                    num1 = 0;
                }
                $("#display").append("0");
                break;
            case "one":
                if (typeof(operation) == "string") {
                    num2 = 1;
                } else {
                    num1 = 1;
                }
                $("#display").append("1");
                break;
            case "two":
                if (typeof(operation) == "string") {
                    num2 = 2;
                } else {
                    num1 = 2;
                }
                $("#display").append(2);
                break;
            case "three":
                if (typeof(operation) == "string") {
                    num2 = 3;
                } else {
                    num1 = 3;
                }
                $("#display").append(3);
                break;
            case "four":
                if (typeof(operation) == "string") {
                    num2 = 4;
                } else {
                    num1 = 4;
                }
                $("#display").append(4);
                break;
            case "five":
                if (typeof(operation) == "string") {
                    num2 = 5;
                } else {
                    num1 = 5;
                }
                $("#display").append(5);
                break;
            case "six":
                if (typeof(operation) == "string") {
                    num2 = 6;
                } else {
                    num1 = 6;
                }
                $("#display").append(6);
                break;
            case "seven":
                if (typeof(operation) == "string") {
                    num2 = 7;
                } else {
                    num1 = 7;
                }
                $("#display").append(7);
                break;
            case "eight":
                if (typeof(operation) == "string") {
                    num2 = 8;
                } else {
                    num1 = 8;
                }
                $("#display").append(8);
                break;
            case "nine":
                if (typeof(operation) == "string") {
                    num2 = 9;
                } else {
                    num1 = 9;
                }
                $("#display").append(9);
                break;
            case "add":
                operation = "+";
                break;
            case "subtract":
                operation = "-";
                break;
            case "multiply":
                operation = "*";
                break;
            case "divide":
                operation = "/";
                break;
            case "equals":
                if (operation == "+") {
                    answer = add(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "-") {
                    answer = subtract(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "*") {
                    answer = multiply(num1, num2);
                    $("#display").html(answer);
                } else if (operation == "/") {
                    answer = divide(num1, num2);
                    $("#display").html(answer);
                }
                else {
                    return;
                }
                break;
            case "clear":
                num1 = "";
                num2 = "";
                operation = 0;
                answer = "";
                $("#display").html(0);
                break;
        }
    });
});

HTML:

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="script.js"></script>

    </head>
    <body>

        <div class="main">

            <div id="display"></div>

            <div class ="button" id="add">+</div>
            <div class ="button" id="subtract">-</div>
            <div class ="button" id="multiply">x</div>
            <div class ="button" id="divide">/</div>

            <div class ="button" id="zero">0</div>
            <div class ="button" id="one">1</div>
            <div class ="button" id="two">2</div>
            <div class ="button" id="three">3</div>
            <div class ="button" id="four">4</div>
            <div class ="button" id="five">5</div>
            <div class ="button" id="six">6</div>
            <div class ="button" id="seven">7</div>
            <div class ="button" id="eight">8</div>
            <div class ="button" id="nine">9</div>

            <div class ="button" id="equals">=</div>
            <div class ="button" id="clear">C</div>

        </div>

    </body>
</html>

I know there are simple ways to do project. I have seen better ways to do it. However, I am a beginner and trying to learn. — Chuck Reynolds, Sep 02 '15 at 00:22
I think perhaps you misunderstood what getElementById is supposed to do. Try value=this.id instead. — visibleman, Sep 02 '15 at 00:28

score 2 · Accepted Answer · answered Sep 02 '15 at 00:34

To get the ID of the button clicked, you're using document.getElementbyId(), which in jQuery terms is similar to the $('#') selector, and is getting DOM elements, not the ID of the button. To do this, use $(this).attr('id');.

var value = $(this).attr('id');
switch (value) {...}

The reason why there's no errors is it that it just breezes past the switchstatement, since it's basically writing a lot of if statements. They all evaluate as false and the code continues.

A bonus word of advice, since you're new to programming. As a general rule, it's good to include a default case at the end of your switch. This code will run if all other values are false.

Something like this at the end of your code would help in debugging, and could be useful later.

case "clear":
       num1 = "";
       num2 = "";
       operation = 0;
       answer = "";
       $("#display").html(0);
       break;
default:
       console.log("ID not recognized!");
       break;
}

See this question on why `default`s are almost always essential to have: http://stackoverflow.com/questions/4649423/should-switch-statements-always-contain-a-default-clause. Sometimes it's as simple as `default: break;` — Ben Kolya Mansley, Sep 02 '15 at 00:37
Wow! I knew it would be something simple like that. Thanks for the timely response and the advice! — Chuck Reynolds, Sep 02 '15 at 00:54

having issues with javascript calculator

1 Answers1