Построение калькулятора, получение Невозможно установить свойство 'value' из 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');

возвращает ноль. Поэтому, когда вы делаете это:

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

I ' Я предполагаю, что у вас нет селектора с классом .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>

Answer 2

Вероятно, это связано с отключенным свойством тега input html. Удалите отключенный атрибут и попробуйте, если он работает.

Answer 3

Кажется, ваш document.querySelector не находит нужный вам элемент.

Эта ошибка означает, что, вероятно, display является нулевым, когда вы пытаетесь установить его значение, и единственное, что может вызвать это, - корректор, не находящий нужное выделение.