Scripting help for calculator project


#1

Hey guys,

I’m stuck on the early stages of scripting for the calculator project. I got so far as to change the display on the calculator to whatever number is clicked, but I can’t figure out how to store that info in a variable to access later.

My code is below. #display is the display field on the calculator, .number is the class of buttons which are numbered. The code works in terms of changing the number on the display, but I don’t know how to store that change (aka number) for later use. Any help would be greatly appreciated, I can’t seem to figure this one out. Thanks! -Erik

const display = document.body.querySelector(’#display’);
document.querySelectorAll(’.number’).forEach(item =>
item.addEventListener(‘click’, function(e) {
display.textContent = e.target.textContent;
}));


#2

Hey Erik,

You could potentially store it in an array which means you could keep pushing all the input to it until it’s ready to be calculated.


#3

Hi Erik,
An alternative to using an array would be to simply multiply your current value by 10, then add what was clicked.
For example, consider the following function:

let displayValue = 0;
const clickNum = num => displayValue = displayValue * 10 + num;

Calling clickNum with a number 0-9 will add that digit to the end of displayValue, like so:

clickNum(1); // displayValue = 1
clickNum(2); // displayValue = 12
clickNum(0); // displayValue = 120
clickNum(5); // displayValue = 1205
clickNum(5); // displayValue = 12055

Resetting would then be as simple as setting displayValue to 0.


Applying this to what you currently have would like something like this:

const display = document.querySelector('#display');
let displayValue = 0;

// clickNum function here

document.querySelectorAll('.number').forEach(num => {
  num.addEventListener('click', e => {
    // call clickNum
    // set the texContent of your display element to the value stored in displayValue
  });
});

I’ll let you fill in the blanks :wink:


#4

Thank you guys! The array definitely works and is what I was initially going for, but it looks like the displayValue idea will greatly simplify my code. It’s nice to learn tricks like this.

-Erik