Buttons on my calculator don't seem to be working and i believe i linked everything correctly. Maybe im missing something so any help would be greatly appreciated. Maybe a fresh set of eyes will be able to notice where i went wrong and can point it out. I'm still new to javascript.I tried checking to see if it's due to the previous operand and current operand but i still see nothing about it
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}
clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete() {
}
appendNumber(number) {
if (number === '.' && this.currentOperand.uncludes('.')) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperation(operation) {
}
compute() {
}
updateDisplay() {
this.currentOperandTextElement.innerText = this.currentOperand
}
}
const numberButtons = document.querySelectorAll('[data-number]')
const allclearButton = document.querySelectorAll('[data-all-clear]')
const deleteButton = document.querySelectorAll('[data-delete]')
const operationButton = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelectorAll('[data-equals]')
const previousOperandTextElement = document.querySelectorAll('[previous-operand]')
const currentOperandTextElement = document.querySelectorAll('[current-operand]')
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculater</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<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-number>1</button>
<button data-number>2</button>
<button data number>3</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>÷</button>
<button data-operation>*</button>
<button data-operation>+</button>
<button data-operation>-</button>
<button data-operation>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</body>
</html>