0

I'm beginning small projects with javascript and I'm not sure why I'm blocked, now.

I'm trying to build a calculator with the little knowledge I have (which is almost nothing). For now, I'm trying to work with Integers, only. I'll see for float numbers later!

With my code, I manage to display what I type (for instance, for "1 + 5" I get "1" then "5"), but when I press the "equal" button, I get a "NaN". I do know it stand for Not A Number, and I think I might be facing a problem of type.

So I tried in various parts of my code some "console.log(myVariables)" or make tests with "type of". I think I managed to find at which point I get a "NaN", but I cannot solve the problem.

Here's my code, so far, with comments so that you can follow my logic. :)

//here I target my buttons
numberOne.addEventListener('click', function() {screen.innerHTML += 1;});
numberTwo.addEventListener('click', function() {screen.innerHTML += 2;});
numberThree.addEventListener('click', function() {screen.innerHTML += 3;});
//... and so on for all different numbers and signs ...

//I initialize my variables
let firstNumber = "";
let secondNumber = "";

//I create an event for my "plus" and "equal" button
plusSign.addEventListener('click', add);
equalSign.addEventListener('click', equals);

//with this I'm clearing the output screen between two inputs ("firstNumber" and "secondNumber")
function clear() {
    screen.innerHTML = "" ;
}

//I memorize the HTML value of the output screen in "firstNumber",
//I convert it into an integer,
//then I clear the output screen
function add() {
    firstNumber = parseInt(screen.innerHTML);
    clear();
}

//I memorize the current value on the screen and convert it into an integer too
function equals() {
    secondNumber = parseInt(screen.innerHTML);
    screen.innerHTML = firstNumber + secondNumber;
}

Now, "firstNumber" and "secondNumber" should be integers, shouldn't they?

I tried to "parseInt" in various parts of the code, but at the end it seems that the problem remains the same.

I know they are many code example on the internet for such a project, much more sophisticated, but I really was trying to think on my own. Maybe it is that I've been doing things the wrong way. Or maybe I just need to stop looking for the answer and retry tomorrow with a clear mind. ^^'

Alexis Boucherie
  • 1
  • 2
  • 1
    Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – mplungjan May 10 '22 at 16:21
  • Please delegate: `calculator.addEventListener('click', function() {screen.textContent += e.target.textContent;})` – mplungjan May 10 '22 at 16:22
  • 2
    debug. `console.log(screen.innerHTML, firstNumber, secondNumber, firstNumber + secondNumber);` – epascarello May 10 '22 at 16:25
  • 1
    As part of your learning, now is a great time to start using your browser's debugging tools. You can output meaningful information to the console or even use the script debugger to step through code and functions line by line as they execute, observing the exact runtime behaviors and values. When you do this, which specific operation first produces an unexpected result? What were the exact values used in that operation? What was the result? What result was expected? Why? – David May 10 '22 at 16:25
  • [How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) and [What is a debugger and how can it help me diagnose problems?](https://stackoverflow.com/q/25385173) – VLAZ May 10 '22 at 16:28

0 Answers0