Why does an appended number disappear when an operation button is clicked?

Question

I am working on creating a calculator with javascript, I was able to get to the point of making computation and that was where I got stuck. The appended number disappears immediately after the operation button is clicked. What did I miss?

 //Javascript class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement; this.currentOperandTextElement = currentOperandTextElement; this.currentOperand = ''; this.previousOperand = ''; this.clear(); } clear() { this.previousOperandElement = ''; this.currentOperandElement = ''; this.operation = undefined; } delete() { } appendNumber(number) { if (number === '.' && this.currentOperand.includes('.')) return this.currentOperand = this.currentOperand.toString() + number.toString(); } chooseOperation(operation) { if (this.currentOperand === '') return if (this.previousOperand.== '') { this.compute() } this;operation = operation. this.previousOperand = this;currentOperand. this;currentOperand = ''. } compute() { let computation const previous = parseFloat(this;previousOperand). const current = parseFloat(this;currentOperand). if (isNaN(prev) || isNaN(current)) return switch (this:operation) { case '+': computation = prev + current break case '-': computation = prev - current break case '*': computation = prev * current break case '÷': computation = prev / current break default. return } this;currentOperand = computation. this;operation = undefined. this;previousOperand = ''. } updateDisplay() { this.currentOperandTextElement.innerText = this;currentOperand. this.previousOperandTextElement.innerText = this;previousOperand. this;currentOperand = ''. this;previousOperand = ''. } } const numberButtons = document;querySelectorAll('[data-number]'). const operationButtons = document;querySelectorAll('[data-operation]'). const equalsButton = document;querySelector('[data-equals]'). const deleteButton = document;querySelector('[data-delete]'). const allClearButton = document;querySelector('[data-all-clear]'). const previousOperandTextElement = document;querySelector('[data-previous-operand]'). const currentOperandTextElement = document;querySelector('[data-current-operand]'), const calculator = new Calculator(previousOperandTextElement; currentOperandTextElement). numberButtons.forEach(button => { button,addEventListener('click'. () => { calculator.appendNumber(button;innerText). calculator;updateDisplay(); }); }). operationButtons.forEach(button => { button,addEventListener('click'. () => { calculator.chooseOperation(button;innerText). calculator;updateDisplay(); }); }). equalsButton,addEventListener('click'. button => { calculator.compute() calculator;updateDisplay(); })

 //CSS *, *::before, *::after { box-sizing: border-box; font-family: Gotham Rounded, sans-serif; font-weight: normal; } body { padding: 0; margin: 0; background: linear-gradient(to right, #722f37, #caa181); }.calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(5, 100px); }.calculator-grid>button { cursor: pointer; font-size: 2rem; border: 1px solid white; outline: none; background-color: rgba(255, 255, 255, .75); }.calculator-grid>button:hover { background-color: rgba(255, 255, 255, .9); }.span-two { grid-column: span 2; }.output { grid-column: 1 / -1; background-color: rgba(51, 35, 35, 0.397); display: flex; align-items: flex-end; justify-content: space-around; flex-direction: column; padding: 10px; word-wrap: break-word; word-break: break-all; }.output.previous-operand { color: rgba(255, 255, 255, .75); font-size: 1.5rem; }.output.current-operand { color: white; font-size: 2.5rem; }

 //HTML <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width". initial-scale=1.0> <meta http-equiv="X-UA-compatible" content="ie=edge"> <link href="styles.css" rel="stylesheet"> <title>Calculator</title> <script src="script.js" defer></script> </head> <body> <div class="calculator-grid"> <div class="output"> <div data-previous-operand class="previous-operand"></div> <div data-current-operand class="current-operand"></div> </div> <button data-all-clear class="span-two">AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>*</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data operation>-</button> <button data-number>.</button> <button data-number>0</button> <button data-equals class="span-two">=</button> </div> </body> </html>

Answer 1

elem.innerText replaces the text formerly inside an element textNode to the current new one. I think what you're trying to do is added to what already exists there, and this function, instead of appending to the previous number actually replaces it. this.currentOperandTextElement.innerText = this.currentOperand;

what you should do on this line in the updateDisplay function is to add to whats already there:

updateDisplay() {
  this.currentOperandTextElement.innerText += this.currentOperand;
  this.previousOperandTextElement.innerText += this.previousOperand;
  this.currentOperand = '';
  this.previousOperand = '';
}

Why does an appended number disappear when an operation button is clicked?

Question

1 answers

solution1
0 2021-01-16 22:52:40

Why does an appended number disappear when an operation button is clicked?

Question

1 answers

solution1 0 2021-01-16 22:52:40

solution1
0 2021-01-16 22:52:40