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:





    
    
    
    Calculator
    
    
    
    



    
        Pocket calculator™
        0
        
            0
            1
            2
            3
            4
            5
            6
            7
            8
            9
            C
            AC

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 = [];
}

berriz44 · Accepted Answer

Credits to @swapnesh

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

JS adding unrequested empty objects to array

Answers (1)

Related Questions