I’m making a calculator in JS, but it just keeps giving me NaN. I don’t understand why. Whenever I click equal, it gives me NaN. I can see that the numbers I clicked are in the log, however, when I equate them, it says NaN (op) Nan. Despite the previous acknowledgement of the numbers being clicked.
I have tried multiple things, including adding and removing console.log
in different places, changing parseInt
to parseFloat
, then back to parseInt
, and looking at other solutions, but none of them really worked for me.
Here’s my JS, and my HTML in case it matters.
var $screen = $("#screen");
var $number = $(".number");
var $clearnum = $(".clearnum");
var num1 = null;
var num2 = null;
var currentNumber = 1;
var op = $("#operator");
var answer = (num1, op, num2);
var click = 0;
function findAnswer() {
num1 = parseInt(num1);
num2 = parseInt(num2);
console.log(num1, op, num2);
if (op == "+") {
answer = num1 + num2;
}
if (op == "-") {
answer = num1 - num2;
}
if (op == "*") {
answer = num1 * num2;
}
if (op == "/") {
answer = num1 / num2;
}
num1 = answer;
num2 = null;
currentNumber = 1;
}
function more() {
if (click > 8) {
click = click - 5;
}
if (currentNumber == 2) {
findAnswer();
$screen.empty();
$screen.append(num1);
}
currentNumber = 2;
}
function returnPractice() {
if (click > 8) {
return;
}
alert("This will never show if click is greater than 8.");
}
$number.on('click', function() {
click++;
returnPractice();
var numberPressed = $(this).html();
$screen.append(numberPressed);
console.log(numberPressed);
if (currentNumber == 1) {
if (num1 = null) {
num1 = numberPressed;
} else {
num1 = num1 + numberPressed;
}
}
if (currentNumber == 2) {
if (num2 == null) {
num2 = numberPressed;
} else {
num2 = num2 + numberPressed;
}
}
});
$("#plus").on('click', function() {
more();
$screen.append("+");
op = "+"
currentNumber++;
});
$("#minus").on('click', function() {
more();
$screen.append("-");
op = "-"
currentNumber++;
});
$("#times").on('click', function() {
more();
$screen.append("*");
op = "*"
currentNumber++;
});
$("#divided").on('click', function() {
more();
$screen.append("/");
op = "/"
currentNumber++;
});
$clearnum.on('click', function() {
$screen.empty();
num1 = null;
num2 = null;
currentNumber = 1;
click = 0;
});
$("#equal").on('click', function() {
{
$screen.append("=");
findAnswer();
a = answer;
answer = a.toFixed(1);
console.log(isNaN("answer"));
if (click > 8) {
$screen.empty();
var answerLength = answer.toString;
click = answerLength.length;
}
$screen.append(answer);
console.log(answer);
}
});
<html>
<head>
<title>Calculator</title>
<link href="resources/CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen"></div>
<div id="buttons">
<div id="numbers">
<div class="number" id="num1">1</div>
<div class="number" id="num2">2</div>
<div class="number" id="num3">3</div>
<div class="number" id="num4">4</div>
<div class="number" id="num5">5</div>
<div class="number" id="num6">6</div>
<div class="number" id="num7">7</div>
<div class="number" id="num8">8</div>
<div class="number" id="num9">9</div>
<div class="number" id="num0">0</div>
<div class="equal" id="equal">=</div>
<div class="clearnum" id="clear">C</div>
</div>
<div id="operators">
<div class="operator" id="plus">+</div>
<div class="operator" id="minus">-</div>
<div class="operator" id="times">*</div>
<div class="operator" id="divided">/</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="resources/js/script.js"></script>
</body>
</html>
Here’s a screenshot of the issue too.
Any help would be appreciated.