未捕获的类型错误：无法读取未定义的属性“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