I have been getting this error repeatedly and I haven't been able to find the exact cause for this.
The error is:
Cannot read property 'toString' of undefined
at Calculator.appendNumber (calc.js:16)
at HTMLButtonElement.<anonymous> (calc.js:96)
This is happening with toString as well as isNan
Here is my HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="calc.css">
<title>Calculator</title>
</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>
<script type="text/javascript" src="calc.js">
</script>
</body>
</html>
Here is my Javascript:
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
}
clear(){
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete(){
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
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 prev = parseFloat(this.previousOperand)
const current = parseFloat(this.currentOperand)
if(isNan(prev) || isNaN(curent)) 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 = ''
}
getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split('.')[0])
const decimalDigits = (stringNumber.split('.')[1])
let integerDisplay
if (isNan(integerDigits)) {
integerDisplay = ''
} else {
integerDisplay = integerDigits.toLocaleString('en',{ maximumFractionDigits: 0})
}
if(decimalDigits != null){
return `${intgerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
updateDisplay(){
this.currentOperandTextElement.innerText = this.getDisplayNumber(currentOperand)
if (this.operation != null ) {
this.previousOperandTextElement.innerText =
`${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ''
}
}
}
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 previousOperand = document.querySelector('[data-previous-operand]')
const currentOperand = 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()
})
allClearButton.addEventListener('click', button => {
calculator.clear()
calculator.updateDisplay()
})
deleteButton.addEventListener('click', button => {
calculator.delete()
calculator.updateDisplay()
})
I am using Electron and any help resolving this issue will be greatly appreciated.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
