未捕獲的類型錯誤：無法讀取未定義的屬性“toString”--javascript

Question

我正在嘗試使用 javascript 創建一個計算器，但是每當我單擊數字按鈕時，我都會在控制台上收到一條錯誤消息“Uncaught TypeError: Cannot read property 'toString' of undefined”。 同時，數字按鈕不顯示在字符串中。 我究竟做錯了什么？

 //Javascript class Calculator { constructor(previousOperandTextElement, currentOperandTextElement) { this.previousOperandTextElement = previousOperandTextElement; this.currentOperandTextElement = currentOperandTextElement; this.clear(); } clear() { this.previousOperandElement = ''; this.currentOperandElement = ''; this.operation = undefined; } delete() { } appendNumber(number) { this.currentOperand = this.currentOperand.toString() + number.toString(); } chooseOperation(operation) { } compute() { } updateDisplay() { this.currentOperandTextElement.innerText = this.currentOperand; } } 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(currentOperandTextElement, previousOperandTextElement); numberButtons.forEach(button => { button.addEventListener('click', () => { calculator.appendNumber(button.innerText); 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

您不初始化“currentOperand”。

 constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.currentOperand = "";
    this.clear();
  }

Answer 2

在第一次單擊按鈕時，您的this.currentOperand沒有任何值，因此它將是undefined的變量。 並且undefined的變量沒有 toString 屬性。 所以解決方案是，你需要在 appendNumber function 中添加條件，如果變量未定義，那么變量只需由number.toString填充，如下面的代碼

appendNumber(number) {
    if(this.currentOperand != undefined){
         this.currentOperand = this.currentOperand.toString() + number.toString();
    }else{
        this.currentOperand = number.toString();
    }
}

或者如果你想讓這更簡單你可以在構造函數中定義變量，因為基本上錯誤是由Cannot read property 'toString' of undefined ，所以我們只需要在第一個 state 處更改變量，將未定義變量更改為已定義變量與

this.currentOperand = '';

未捕獲的類型錯誤：無法讀取未定義的屬性“toString”--javascript

問題描述

2 個解決方案

解決方案1
0 已采納 2020-12-02 01:57:51

解決方案2
0 2020-12-02 02:27:14

未捕獲的類型錯誤：無法讀取未定義的屬性“toString”--javascript

問題描述

2 個解決方案

解決方案1 0 已采納 2020-12-02 01:57:51

解決方案2 0 2020-12-02 02:27:14

解決方案1
0 已采納 2020-12-02 01:57:51

解決方案2
0 2020-12-02 02:27:14