JS adding unrequested empty objects to array

Question

I was trying to make a calculator and while testing, I ran across this error. When I entered in a number and pressed one of the operation buttons, I ran a console.log test and I have found 3 extra arrays just sitting there, doing nothing. The JSFiddle is here.

I didn't try anything. I expected it not to put these random rays in there, but it did.

HTML:

<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"
        defer></script>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/scripts.js" defer></script>
</head>

<body>
    <div class="calc container container-fluid">
        <p class="text-muted" style="font-size:15px !important">Pocket calculator&trade;</p>
        <div id="display">0</div>
        <div class="keys">
            <div class="calc-key" onclick="update(0)">0</div>
            <div class="calc-key" onclick="update(1)">1</div>
            <div class="calc-key" onclick="update(2)">2</div>
            <div class="calc-key" onclick="update(3)">3</div>
            <div class="calc-key" onclick="update(4)">4</div>
            <div class="calc-key" onclick="update(5)">5</div>
            <div class="calc-key" onclick="update(6)">6</div>
            <div class="calc-key" onclick="update(7)">7</div>
            <div class="calc-key" onclick="update(8)">8</div>
            <div class="calc-key" onclick="update(9)">9</div>
            <div class="calc-key" onclick="del()">C</div>
            <div class="calc-key" style="background:rgb(255,75,75)" onclick="delAll()">AC</div>
        </div>
        <div class="operations">
            <button class="op-key" onclick="update('add')">+</button>
            <button class="op-key" onclick="update('sub')">-</button>
            <button class="op-key" onclick="update('mul')">&times;</button>
            <button class="op-key" onclick="update('div')">&div;</button>
        </div>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@200&display=swap');

* {
  font-family: Livvic, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 32px;
}

.op-key {
  height: 50px !important;
  width: 100px !important;
}

.operations {
  display: inline-grid;
  grid-template-rows: auto auto auto auto;
  gap: 5px;
}

#display {
  direction: rtl;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  margin: 5px;
  padding: 5px;
  color: #fff;
}

.calc {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: #ccc;
  width: max-content;
  height: max-content;
  padding: .5em .5em 1em;
  border: #666 solid 5px;
  border-radius: 20px;
}

.keys {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 5px;
}

/* Boring CSS Extra Styles AASKLSYHAKLDJHS */

.calc-key,
.op-key {
  border-style: outset;
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: 100px;
  height: 100px;
}

.calc-key:hover,
.calc-key:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.calc-key:hover {
  transform: translateY(-1px);
}

.calc-key:active {
  background-color: #F0F0F1;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}

JS:

let stats = {
    currentOperation: '',
    operationing: false,
    numbers: []
};

const funcs = {
    execute: (o) => {
        switch (o) {
            case 'add':
                if (stats.operationing == false) {
                    stats.operationing = true;
                }
                stats.currentOperation = 'add';
                stats.numbers.push([Number(document.getElementById('display').innerText), 'add']);
                document.getElementById('display').innerText = '0';
            case 'sub':
                if (stats.operationing == false) {
                    stats.operationing = true;
                }
                stats.currentOperation = 'sub';
                stats.numbers.push([Number(document.getElementById('display').innerText), 'sub']);
                document.getElementById('display').innerText = '0';
            case 'mul':
                if (stats.operationing == false) {
                    stats.operationing = true;
                }
                stats.currentOperation = 'mul';
                stats.numbers.push([Number(document.getElementById('display').innerText), 'mul']);
                document.getElementById('display').innerText = '0';
            case 'div':
                if (stats.operationing == false) {
                    stats.operationing = true;
                }
                stats.currentOperation = 'div';
                stats.numbers.push([Number(document.getElementById('display').innerText), 'div']);
                document.getElementById('display').innerText = '0';
            case 'eq':
                let result = 0;
                stats.numbers.forEach((i) => {
                    switch (i[1]) {
                        case 'add':
                            result = result + i[0];
                        case 'sub':
                            result = result - i[0];
                        case 'mul':
                            result = result * i[0];
                        case 'div':
                            result = result / i[0];
                    }
                });
                stats.operationing = false;
                document.getElementById('display').innerText = result;
            default:
                if (document.getElementById('display').innerText == '0' || document.getElementById('display').innerText == '' || document.getElementById('display').innerText == 'Err') {
                    document.getElementById('display').innerText = '';
                    document.getElementById('display').innerText = `${document.getElementById('display').innerText}${o}`;
                } else {
                    document.getElementById('display').innerText = `${document.getElementById('display').innerText}${o}`;
                }
        }
    },
    limitCheck: () => {
        if (document.getElementById('display').innerText.length > 8) {
            document.getElementById('display').innerText = 'Err';
        }
    }
};

function update(operation) {
    funcs.execute(operation);
    funcs.limitCheck();
};

function del() {
    document.getElementById('display').innerText = document.getElementById('display').innerText.slice(0, -1);
}

function del() {
    document.getElementById('display').innerText = '0';
    stats.numbers = [];
}

You are missing some important break in your switch case. Looking at your code, I am not sure why on each operation you are doing document.getElementById('display').innerText = '0'; Can u please add more what you are looking / trying to achieve — swapnesh
– swapnesh, Commented Dec 11, 2022 at 19:34
@swapnesh ok, if i thought more that wouldve been more obvious — berriz44
– berriz44, Commented Dec 12, 2022 at 14:38

berriz44 · Accepted Answer · 2022-12-12 14:39:21Z

1

Credits to @swapnesh

I had to add a break statement. Wasn't this obvious?

answered Dec 12, 2022 at 14:39

berriz44

721 gold badge2 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS adding unrequested empty objects to array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related