append number to show on screen in calculator

Question

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
        }
    
    }

Convert the number variable to an integer by using `number = parseInt(number)` or `number = +number` before the `if` statement — a.mola, Mar 16 '21 at 01:40
I tried both if statements. It only produced the same result — Andrés Ramírez, Mar 16 '21 at 01:49
Does this answer your question? [Repeat a string in JavaScript a number of times](https://stackoverflow.com/questions/1877475/repeat-a-string-in-javascript-a-number-of-times) — Heretic Monkey, Mar 16 '21 at 02:38
I dont think i was clear enough. After each button click a number should appear, if button is clicked again then another number will appear alongside the first number and so on. after button click 1 will appear and if user clicks the same button, the screen will show up with 11 and so on. They should be concatenated — Andrés Ramírez, Mar 16 '21 at 02:50

score 1 · Accepted Answer · answered Mar 16 '21 at 03:30

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();
}

the parseInt function takes a variable and convert it to integer for example if you give it a string like "00001564" it will return the the number 1564 instead of 00001564 — Amine Beihaqi, Mar 16 '21 at 04:51

a.mola · Answer 2 · 2021-03-16T02:34:24.150

0

Use this to repeat a string without a loop

let firstValue = "0"; // You don't need this to know if the button was clicked, the button would not call the function if it wasn't clicked on
const count = 12; // You said you want to repeat the number 12 times

...

function inputNumber(number) {
    isBtnClicked = true;
    screenDisplay.innerHTML = number.repeat(count);
}

edited Mar 16 '21 at 02:34

answered Mar 16 '21 at 01:59

a.mola

3,883
7
23

@Andrés Ramírez how many times do you want the number to be concatenated? – a.mola Mar 16 '21 at 02:16
i didnt really think of that. 12 times – Andrés Ramírez Mar 16 '21 at 02:26

score 0 · Answer 3 · answered Mar 16 '21 at 02:40

you can try something like this

    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 = screenDisplay.value+=number;
        }
        let secondValue = ''
        if (secondValue !== 0) {
            secondValue = number;
            screenDisplay.innerHTML = secondValue += number
        }
    
    }

append number to show on screen in calculator

3 Answers3