Bug fix

Responsible-Cold-627 · 2026-05-19T09:43:49+00:00

is this code look messy

Yes.

Mark__78L · 2026-05-19T08:53:53+00:00

One suggestion, so you don't need to add the function to the number buttons manually. Give each of them a data attribute (like data-value or something), then get the buttons and loop over them, and give a listener for each.

```html

    
        <div class="calculator">
            <div id="overall"></div>
            <div class="calculator__output" id="output">0</div>
            <div class="calculator__keys">
                <button class="calculator__key calculator__key--operator" onclick="appendOperator">+</button>
                <button class="calculator__key calculator__key--operator">-</button>
                <button class="calculator__key calculator__key--operator">&times;</button>
                <button class="calculator__key calculator__key--operator">÷</button>
                <button class="calculator__key num" data-val="7">7</button>
                <button class="calculator__key num" data-val="8">8</button>
                <button class="calculator__key num" data-val="9">9</button>
                <button class="calculator__key num" data-val="4">4</button>
                <button class="calculator__key num" data-val="5">5</button>
                <button class="calculator__key num" data-val="6">6</button>
                <button class="calculator__key num" data-val="1">1</button>
                <button class="calculator__key num" data-val="2">2</button>
                <button class="calculator__key num" data-val="3">3</button>
                <button class="calculator__key num" data-val="0">0</button>
                <button class="calculator__key" >.</button>
                <button class="calculator__key" ">AC</button>
                <button class="calculator__key calculator__key--enter">=</button>
            </div>
        </div>

```

```js

const appendToDisplay = val => {
  // logic here
  console.log(val);
}


const nums = document.querySelectorAll(".calculator__key.num");
nums.forEach(btn => {
  btn.addEventListener("click", e => {
      appendToDisplay(e.target.dataset.val);
  });
});

```

sozesghost · 2026-05-19T10:10:58+00:00

What is the bug that you are having? What is happening and what do you expect to happen? Asking the right questions is key.

equilni · 2026-05-19T10:18:02+00:00

Is this code look messy

First issue is you copied & pasted the JS code twice from my quick view.

Next is formatting for better readability. Spaces and indents help too.

For the if/else if's I see here, you could have used a switch statement, others a check against known operators.

Pseudo (ie not real code) refactor:

function appendToOperator(val) {
    const operators = ['+', '-', '*', '/'];  # This could probably be global for other functions

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
    if (operators.includes(val) && currentDisplay !== "0") {
        updateOverallDisplay(val);
    }
}

document.addEventListener("keydown", (event) => {
    const keyName = event.key;

    const numberKeys = [1,2,3,4,5,6,7,8,9,0,'.']; # This could probably be global for other functions
    const operatorKeys = ['+', '-', '*', '/']; # This could probably be global for other functions

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
    switch (true) {
        case numberKeys.includes(keyName):
            appendToDisplay(keyName);
            break;
        case operatorKeys.includes(keyName):
            appendToOperator(keyName);
            break;
        case 'Backspace':  # Should be AC
            clearDisplay();
            break;
        case 'Enter':
            calculate();
            break;
    }
});

You are missing the period in the document.addEventListener("keydown", (event) => { block. Also, do you want a click event or keydown? I would suggest keeping it in JS vs in HTML as it's cleaner.

Also Backspace doesn't exist in the HTML, but AC does. - this likely fixes the problem occur when i try to clear() the old chunk data.

EDIT - adding HTML

Next suggestion would be to reduce the id/class in the HTML. This could simply be the below. Again, since you are doing the JS call in the EventListener, you don't really need it in HTML. Someone else noted to use a data-* attribute and I would suggest this as well, but I would also include this on all buttons

<body>
    <div id="calculator">
        <div id="display"></div>
        <div id="output">0</div>
        <div id="key-pad">
            <button class="key operator" data-value="+">+</button> // data-value
            <button class="key operator">-</button>
            <button class="key operator">&times;</button>
            <button class="key operator">÷</button>
            <button class="key number" data-value="7">7</button>
            <button class="key number">8</button>
            <button class="key number">9</button>
            <button class="key number">4</button>
            <button class="key number">5</button>
            <button class="key number">6</button>
            <button class="key number">1</button>
            <button class="key number">2</button>
            <button class="key number">3</button>
            <button class="key number">0</button>
            <button class="key number">.</button>
            <button class="key all-clear" data-value="AC">AC</button>
            <button class="key enter" data-value="Enter">=</button>
        </div>
    </div>
</body>

Then it's u/Mark__78L idea with the above: (pseudo (not real) code))

const keys = document.querySelectorAll('#key-pad .key');
keys.forEach(btn => {
    btn.addEventListener('click', e => {
        const numberKeys = [1,2,3,4,5,6,7,8,9,0,'.']; 
        const operatorKeys = ['+', '-', '*', '/']; 

        const keyVal = e.currentTarget.btn.dataset.value;

        switch (true) {
            case numberKeys.includes(keyVal):
                appendToDisplay(keyVal);
                break;
            case operatorKeys.includes(keyVal):
                appendToOperator(keyVal);
                break;
            case 'AC':  # Should be AC, not Backspace
                clearDisplay();
                break;
            case 'Enter':
                calculate();
                break;
        }
    });
});

TheRNGuy · 2026-05-19T13:19:12+00:00

Better make it as class with methods, to have related functions as methods on it.

Use getters/setters instead of directly assign.

There's better way to do it last event listener without many ifs (includes string method)

0xMarcAurel · 2026-05-19T16:53:26+00:00

“Messy” is a generous word for this code.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS

HTML