Problem: Calculator only works with the first digits
I feel like it's important for me to mention that this is my very first JavaScript project ever. Some parts of the code may or may not be difficult to understand, but that's because this project is part of my HTML curriculum, so I copied my instructor's code basically character for character since I don't know anything else I could do.
My calculator is supposed to be able to solve problems with two numbers. For example, it should be able to solve 5 + 4 or 988 / 35. The calculator is able to correctly solve problems with one-digit numbers, for example 5 + 4 = 9 or 5 / 2 = 2.5. However, my calculator seems to get confused with 2 or more-digit numbers. For example, for an addition problem: If num1 = 56 and num2 = 8,643, the calculator will only work with the first digits of the numbers. So, in this case, it would instead calculate 5 + 8 so the answer would be 13, even though it's very obvious that 56 + 8,643 =/= 13. I'm pretty sure the main problem is that only the first digit is getting converted to an integer. But I don't know how to make it so that the entire string (is that the correct term?) gets turned into an integer. (Yes, I've looked at tons of videos and articles and none of them solve my problem.)
As I stated before, this is part of a class I'm taking for school. My instructor posts video lessons for us to follow. I've looked at my code, and then their code, over and over and over again. And my code is the exact same as theirs, word for word and character for character. Yet their code works completely fine, and mine doesn't. I've tried looking up solutions to this problem, because it seems that the calculator's main problem is not being able to convert a string (?) of numbers into actual numbers that can be added and divided and stuff. However, I haven't found anything that I can apply to my code in this situation. And I'm so new to coding that I genuinely have no idea what to do. I even asked my instructor, and they didn't know what the problem was.
Here is my code... I'm very new to JavaScript so most of my comments are intended for me:
Code Snippet
// This calculator is intended to only be able to calculate two numbers (so far, at least). The var currentNumber is
// supposed to indicate whether num1 or num2 is active (so, initially currentNumber will be equal to 1, to match
// with num1. Once an operator is pressed, then currentNumber equals 2, meaning that you can now insert your second
// number)
var currentNumber = 1;
var num1;
var num2;
var $screen = $("#screen");
var $number = $(".number");
// when someone clicks on a number
// it saves the number to do the math
$number.on('click', function() {
var numberPressed = $(this).html();
$screen.append(numberPressed);
if (currentNumber == 1) {
if (num1 == null) {
num1 = numberPressed;
}
else {
num1 = num1 + numberPressed;
console.log(num1);
}
}
if (currentNumber == 2) {
if (num2 == null) {
num2 = numberPressed;
}
else {
num2 = num2 + numberPressed;
console.log(num2);
}
}
});
/* Code for the operators (and clear)*/
// Note: currentNumber++ is the short version of currentNumber = currentNumber + 1
// Which would be the equivalent of if (currentNumber == 1) { currentNumber = 2 }
$("#clear").on('click', function ()
{
$screen.empty();
num1 = null;
num2 = null;
currentNumber = 1;
})
$("#plus").on('click', function ()
{
$screen.append("+");
op = "+";
currentNumber++;
})
$("#minus").on('click', function ()
{
$screen.append("-");
op = "-";
currentNumber++;
})
$("#times").on('click', function ()
{
$screen.append("x");
op = "*";
currentNumber++;
})
$("#over").on('click', function ()
{
$screen.append("/");
op = "/";
currentNumber++;
})
$("#equal").on('click', function ()
{
$screen.append("=");
console.log(num1, num2);
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;
}
$screen.append(answer);
num1 = null;
num2 = null;
currentNumber = 1;
})button {
font-weight: bold;
font-size: 1.2rem;
margin: 0.1rem;
width: 2rem;
height: 2rem;
}
button.number {
background-color: steelblue;
color: white;
}
button:not(.number) {
background-color: orange;
}
#screen {
font-family: monospace;
font-size: 1.4rem;
}<button class="number">0</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<br>
<button id="clear">C</button>
<button id="plus">+</button>
<button id="minus">-</button>
<button id="times">x</button>
<button id="over">/</button>
<button id="equal">=</button>
<br>
<div id="screen"><div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
Try parseFloat() instead parseInt() cause parseInt() "convert" e.g 3.14 to 3
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
And use . instead , in your number input otherwise you also have to take care about that, e.g. replace(',','.') -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace?retiredLocale=de