How do I capture the user input via a number button they press?

I’m building a calculator app and like the title states, I want to find a way where I can store my ‘display value’ in a variable to be used in math functions (+ – * /). The buttons do display as expected but the next use case would be to capture that value and place it in a variable.

let numKeys = document.querySelectorAll('.num');
let onScreen = document.getElementById('display-screen');
let addNum = document.getElementById('add');
let subtractNum = document.getElementById('subtract');
let multiplyNum = document.getElementById('multiply');
let divideNum = document.getElementById('divide');
let decimal = document.getElementById('.');
let clearScreen = document.getElementById('clear');
let backSpace = document.getElementById('back-space');
let oneNum = document.getElementById('1');
let twoNum = document.getElementById('2');
let threeNum = document.getElementById('3');
let fourNum = document.getElementById('4');
let fiveNum = document.getElementById('5');
let sixNum = document.getElementById('6');
let sevenNum = document.getElementById('7');
let eightNum = document.getElementById('8');
let nineNum = document.getElementById('9');

oneNum.addEventListener('click', () => {
  document.getElementById('display-screen').textContent += '1';
});
twoNum.addEventListener('click', () => {
  //document.getElementById('display-screen').id;
  console.log(twoNum.value);
});
threeNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '3';
});
fourNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '4';
});
fiveNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '5';
});
sixNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '6';
});
sevenNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '7';
});
eightNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '8';
});
nineNum.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '9';
});
decimal.addEventListener('click', () => {
  document.getElementById('display-screen').innerHTML += '.';
});
clearScreen.addEventListener('click', () => {
  document.getElementById('display-screen').textContent = '';
})

<div class="calc-keys">
  <div id="row-one">
    <button type="button" class="num" id="7">7</button>
    <button type="button" class="num" id="8">8</button>
    <button type="button" class="num" id="9">9</button>
    <button type="button" id="add">+</button>
  </div>

  <div id="row-two">
    <button type="button" class="num" id="4">4</button>
    <button type="button" class="num" id="5">5</button>
    <button type="button" class="num" id="6">6</button>
    <button type="button" id="subtract">-</button>
  </div>

  <div id="row-three">
    <button type="button" class="num" id="1" value="1">1</button>
    <button type="button" class="num" id="2" value="2">2</button>
    <button type="button" class="num" id="3">3</button>
    <button type="button" id="multply">x</button>
  </div>

  <div id="row-four">
    <button type="button" id=".">.</button>
    <button type="button" class="num" id="0">0</button>
    <button type="button" id="equals">=</button>
    <button type="button" id="division">/</button>
  </div>
</div>

Let me know if you need additional details from me, any tips you can provide, and where exactly to look for the answer. Thanks.

Answer

You have already done the work needed to capture key presses. You can just make a global variable and update that variable in each click listener.

let value = 0;
twoNum.addEventListener('click', () => {
    value = (value * 10) + 2
    document.getElementById('display-screen').textContent = value; // The number will automatically be converted to a string here
});

or, if you want to store your number as a string:

let value = "";
twoNum.addEventListener('click', () => {
    value += "2";
    console.log("value as a number is:", parseInt(value);
    document.getElementById('display-screen').textContent = value;
});

Extra tip: You can save a lot of repetition here by using a for loop:

for (let i = 0; i < 10; i++) {
    let button = document.getElementById(i);
    button.addEventListener('click', () => {
        console.log("Button pressed:", i);
    });
}

Advertisement

Answer