Question

我正在开发JavaScript计算器应用程序。当前，当按下按钮时，出现此错误：

未被捕获的TypeError：无法设置innerText的属性'null'

这是我的代码：

class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousOperandTextElement = previousOperandTextElement;
    this.currentOperandTextElement = currentOperandTextElement;
    this.clear();
  }
  clear() {
    this.currentOperand = '';
    this.previousOperand = '';
    this.operation = '';
  }
  delete() {}
  appendNumber(number) {
    this.currentOperand = this.currentOperand.toString() + number.toString();
  }
  chooseOperation(operation) {}
  computer() {}
  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 allClearButton = document.querySelector(['data-all-clear']);
const previousOperandTextElement = document.querySelector(['data-previousOperand']);
const currentOperandTextElement = document.querySelector(['data-currentOperand']);
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})

 <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">
 <title>Calculator</title>
 <link rel="stylesheet" href="css/style.css">
 </head>
  <body>
     <div class="calculator-grid">
    <div class="output">
        <div data-previousOperand class="previous-operand"></div>
        <div data-currentOperand 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 src="js/index.js"></script>
    </body>
    </html>

Answer 1

currentOperandTextElement不是元素类型。使用innerText之前，请检查是否从Element创建了currentOperandTextElement。

updateDisplay() {
  if ( this.currentOperandTextElement instanceof Element ) {
    this.currentOperandTextElement.innerText = this.currentOperand;
  }
}

或将构造器放入下一个构造中以轻松调试称为new Calculator的代码：

constructor(previousOperandTextElement, currentOperandTextElement) {
  if ( ! currentOperandTextElement instanceof Element ) {
    console.error('new Calculator: argument 2 must be instance of Element');
  }

  this.previousOperandTextElement = previousOperandTextElement;
  this.currentOperandTextElement = currentOperandTextElement;
  this.clear();
}

Answer 2

您错误地使用了document.querySelector。代替document.querySelector(['data-currentOperand'])进行document.querySelector('[data-currentOperand]')。

引号内的方括号。

这就是为什么您找不到元素并获取null的原因。随处改变。

Answer 3

如果在引用元素的位置之后添加console.log行，则会发现它们没有找到它们。因此，在初始化计算器时，您传入的是空值。

使用数据属性时。您不应在名称中使用驼峰式大小写。您应该用破折号隔开每个空格。

因此，使用<div data-previous-operand ...并查找querySelector('[data-previous-operand]')。您应该对data-currentOperand

做同样的事情

TypeError：无法将属性“ innertext”设置为null

3 个答案: