时间戳

首页 > 解决方案 > 构建计算器，获取无法设置属性“值”为空

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

问题描述

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

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>

标签： javascriptfunctionobjectpropertiescalculator

解决方案

该错误意味着这一行：

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;
}

我猜你的 class 没有选择器.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>

推荐阅读