构建计算器，获取无法设置属性“值”为空答案

【问题标题】：Building Calculator, getting Cannot set property 'value' of null构建计算器，获取无法设置属性“值”为空
【发布时间】：2020-01-22 06:52:05
【问题描述】：

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

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>

【问题讨论】：

确保您的 HTML 有 .calculator-screen 类，我认为 document.querySelector('.calculator-screen'); 正在返回 null/undefined，请检查
你有一个类calculator-screen的元素吗？如果您发布一个工作示例，则更容易排除故障。

标签： javascript function object properties calculator

【解决方案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>

【讨论】：

嘿，我用代码所指的 HTML 位更新了文件。谢谢你的帮助！
@LucasO 我运行了你的代码并且没有错误，你确定你在正确的地方包含了<script> 标签吗？如果您在尝试选择的 HTML 块之前加载它，它将引发该错误。确保<script> 标记位于文档的最底部，就在结束<body> 标记之前。您可以从我的答案中的 sn-p 看到没有显示任何错误。

【解决方案2】：

您的document.querySelector 似乎没有找到您需要的元素。

此错误意味着当您尝试设置它的值时，display 可能为空，唯一可能导致此错误的是校正器未找到您想要的选择。

【讨论】：

【解决方案3】：

这可能是由于 input html 标签的 disabled 属性。删除 disabled 属性并尝试它是否有效。

【讨论】：