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.
