javascript - 构建计算器，获取 Cannot set property 'value' of null

Question

我正在构建一个计算器，但不断收到此错误，我尝试了几种不同的方式来输入它，但我无法弄清楚，请帮忙!

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  display.value = calculator.displayValue;
}

updateDisplay();

我收到错误

  display.value = calculator.displayValue;

这是该文件的 html

<div class="calculator">
            <input type="text" class="calculator-screen" value = "0" disabled />
            <div class="calculator-keys">        
                <button type="button" class="operator" value="+">+</button>
                <button type="button" class="operator" value="-">-</button>
                <button type="button" class="operator" value="*">&times;</button>
                <button type="button" class="operator" value="/">&divide;</button>

Answer 1

该错误意味着这一行:

const display = document.querySelector('.calculator-screen');

返回 null。所以当你这样做时:

display.value = calculator.displayValue;

你实际上是在说:

null = calculator.displayValue;

尝试记录该值并自行检查:

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  console.log('display: ', display); // this is probably 'null'
  display.value = calculator.displayValue;
}

我猜您没有 .calculator-screen 类的选择器。仔细检查拼写或发布相关 HTML，以便我确认。

这是您的代码，它似乎工作正常，我没有收到错误，所以我不确定您这边发生了什么:

const calculator = {
  displayValue: '0',
  firstOperand: null,
  waitingForSecondOperand: false,
  operator: null,
};

function updateDisplay() {
  const display = document.querySelector('.calculator-screen');
  display.value = calculator.displayValue;
}

updateDisplay();

<div class="calculator">
    <input type="text" class="calculator-screen" value = "0" disabled />
    <div class="calculator-keys">        
        <button type="button" class="operator" value="+">+</button>
        <button type="button" class="operator" value="-">-</button>
        <button type="button" class="operator" value="*">&times;</button>
        <button type="button" class="operator" value="/">&divide;</button>
    </div>
</div>