无法读取未定义的属性“toString”、“isNan”答案

【问题标题】：Cannot read property 'toString' , 'isNan' of undefined无法读取未定义的属性“toString”、“isNan”
【发布时间】：2021-04-09 15:24:27
【问题描述】：

我反复收到此错误，但我无法找到确切的原因。错误是：

Cannot read property 'toString' of undefined
    at Calculator.appendNumber (calc.js:16)
    at HTMLButtonElement.<anonymous> (calc.js:96)

toString 和 isNan 正在发生这种情况

这是我的 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>

这是我的 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()  
    })

我正在使用 Electron，我们将不胜感激任何解决此问题的帮助。

【问题讨论】：

似乎button.innerText 未定义。
您使用isNan() 和isNaN()。该函数称为isNaN()，因此isNan() 显然是未定义的……此外，您在isNaN(curent) 中有错字，因为变量称为current 也许您应该使用IDE 进行开发。这将突出显示所有这些错误...
@derpirscher 正在使用 Visual Studio 代码实际上是否有任何好的插件可以帮助发现这样的小错误？因为那里没有显示错误
@Aplet123 我将如何给它一个相关的值？我应该在其他地方声明它并将其留空吗？

标签： javascript html electron undefined

【解决方案1】：

请像这样使用calculator.appendNumber(button.innerText) 添加检查

button && button.innerText && calculator.appendNumber(button.innerText)

【讨论】：

我会在哪里使用这张支票？