Build a calculator 21/25. help needed!


#1

here's my code. whenever I submit it, it brings this error.. "Oops, try again. Your .click() function for #equals is malfunctioning for operator='-' " . I can't seem to find out what's wrong...any help?

$(document).ready(function(){
	var testNumLength = function(number) {
        if (number.length > 9) {
            totaldiv.text(number.substr(number.length-9,9));
            if (number.length > 15) {
                number = "";
                totaldiv.text("Err");
            }
        } 
    };
	var number = "";
    var newnumber = "";
    var operator = "";
    var totaldiv = $("#total");
    totaldiv.text("0");
    $("#numbers > a").not("#clear,#clearall").click(function(){
		number += $(this).text();
		totaldiv.text(number);
		testNumLength(number);
    });
    $("#operators > a").not("#equals").click(function(){
		operator = $(this).text();
		newnumber = number;
		number = "";
		totaldiv.text("0");
    });
    $("#clear,#clearall").click(function(){
		number = "";
		totaldiv.text("0");
		if ($(this).attr("id") === "clearall") {
			newnumber = "";
		}
    });
    //Add your last .click() here!
    $("#equals").click(function(){
        if(operator === "+"){
            number = Number(number);
            newnumber = Number(newnumber);
            var ans = (newnumber + number).toString()
            totaldiv.text(ans);
            testNumLength(ans)
            number, newnumber = "";
        }else if(operator === "-"){
            number = Number(number);
            newnumber = Number(newnumber);
            var ans = (newnumber - number).toString()
            totaldiv.text(ans);
            testNumLength(ans)
            number, newnumber = "";
        }else if(operator === "/"){
            number = Number(number);
            newnumber = Number(newnumber);
            var ans = (newnumber / number).toString()
            totaldiv.text(ans);
            testNumLength(ans)
            number, newnumber = "";
        }else if(operator === "*"){
            number = Number(number);
            newnumber = Number(newnumber);
            var ans = (newnumber * number).toString()
            totaldiv.text(ans);
            testNumLength(ans)
            number, newnumber = "";
        }
    });
});

#2

LInk to exercise, please. Can we also see your HTML? Thanks.


#4

here's the HTML code and the link to the task https://www.codecademy.com/courses/web-intermediate-en-jfhjJ/3/6

<!DOCTYPE html>
<html>
	<head>
		<title>Calculator</title>
		<link rel="stylesheet" href="style.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script src="script.js"></script>
	</head>
	<body>
		<div id="calculator">
			<div id="total">
			</div>
			<div id="operators">
				<a>+</a>
				<a>-</a>
				<a>/</a>
				<a>*</a>
				<a id="equals">=</a>
			</div>
			<div id="numbers">
				<a>1</a>
				<a>2</a>
				<a>3</a>
				<a>4</a>
				<a>5</a>
				<a>6</a>
				<a>7</a>
				<a>8</a>
				<a>9</a>
				<a id="clear">C</a>
				<a>0</a>
				<a id="clearall">AC</a>
			</div>
		</div>
	</body>
</html>

#5

This does not work in JavaScript the way one may expect. Only newnumber is set, not number. ES6 lets us do this neat trick (but not ES5) that your browser should support:

[number, newnumber] = ['', '']    // destructuriing an array

otherwise,

number = "";
newnumber = "";

If you are coming from Python, then you are used to there being no switch() statement so elif is the multi-way conditional branch. We can shorten our code quite considerably using a switch statement.

Let's cache the number and newnumber values inside the #equals click event handler, but before the switch.

$('#equals').click(function () {
    const a = parseInt(newnumber,10) || 0;
    const b = parseInt(number,10) || a;
    var n;
    switch (operator) {
    case "+":
        n = a + b;
        break;
    case "-":
        n = a - b;
        break;
    case "*":
        n = a * b;
        break;
    case "/":
        n = a / b || 0;
        break;
    default: n = 0;
    }
    totaldiv.text(n.toString(10));
    testNumLength(n);
    [number, newnumber] = ['', '']
});

As we can see, a lot of the repetition is avoided and the code is simple and easy to read and debug..

Explanation:

    const a = parseInt(newnumber,10) || 0;
    const b = parseInt(number,10) || a;

If = is clicked when there is no value in newnumber, a will be NaN so we OR the expression with 0 so if it is not a number, we replace with zero.

When there is a value in newnumber but no value in number, the OR expression replaces "" with a (the value in the register). This permits entering a number, clicking an operator followed by =.

3 + =

will display 6.

5 * =

will display 25; and so on.


#6

thank you very much.


#7

This topic was automatically closed after 7 days. New replies are no longer allowed.