append number to show on screen in calculator

I am making a simple calculator with plain js, html and css. I am just starting but running into a little problem. I am trying to append numbers to the calculator so that it shows up on screen. I understand what to do but cant think of what i am missing. I am doing this at where if(secondValue !== ‘0’) starts. The code down there only appends 2 numbers and then displays it on screen. For example “22”. I am trying to get it so that a if a user clicks a number button on a calculator the screen will display something like “222222222” and so on. help?

    const screenDisplay = document.querySelector('.screen_display');
    const buttons = document.querySelectorAll('[id]')
    
    let isBtnClicked =false;
    let numberEntered = '';
    let firstValue = "0";
    
    //buttons do work
    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            inputNumber(this.id)
        });    
    });
    
    function inputNumber(number) {
        if (firstValue === "0") {
            isBtnClicked = true;
            screenDisplay.innerHTML = number;
        }
        let secondValue = ''
        if (secondValue !== "0") {
            secondValue = number;
            screenDisplay.innerHTML = secondValue + number
        }
    
    }

Answer

const screenDisplay = document.querySelector('.screen_display');
const buttons = document.querySelectorAll('button[id]')

buttons.forEach(btn => {
    btn.addEventListener('click', function () {
        inputNumber(this.id)
    });
});

const inputNumber = number => {
    const screenNumber = screenDisplay.innerHTML;
    if (screenNumber.length < 16) // limiting the number that can be inserted so you dont excede the limit and get something like 3.333333333333333e+21
        screenDisplay.innerHTML = parseInt(screenNumber + number).toString();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>

<body>
    <div class="screen_display">0</div>
    <button id="0">
        0
    </button>
    <button id="1">
        1
    </button>
    <button id="2">
        2
    </button>
    <button id="3">
        3
    </button>
    <button id="4">
        4
    </button>
    <button id="5">
        5
    </button>
    <button id="6">
        6
    </button>
    <button id="7">
        7
    </button>
    <button id="8">
        8
    </button>
    <button id="9">
        9
    </button>
    <script src="./app.js"></script>
</body>

</html>

im adding the “number” to the end of the string from “screenDisplay.innerHTML” then parseInt the result to get rid of the 0 at the beginning then convert it to string again and I update the “screenDisplay.innerHTML” with the new value

you can try this code:

const screenDisplay = document.querySelector('.screen_display');
const buttons = document.querySelectorAll('button[id]')

buttons.forEach(btn => {
    btn.addEventListener('click', function () {
        inputNumber(this.id)
    });
});

const inputNumber = number => {
    const screenNumber = screenDisplay.innerHTML;
    if (screenNumber.length < 16)
        screenDisplay.innerHTML = parseInt(screenNumber + number).toString();
}

Leave a Reply

Your email address will not be published. Required fields are marked *