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>

Answer 1

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 switch statement, 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;
}