Почему я не могу редактировать свойство стиля с помощью JavaScript?

Question

Итак, я просто пытался заставить <div> появиться на событии onkeyup с javascript, и по какой-то причине он не позволил мне это сделать, и я получил ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'style' из null

Это мой код:

HTML:

<div class="content" id="content" style="display: none">

Javascript:

function showContent() {
    document.getElementById('content').style.display = 'block';
}

Не могли бы вы помочь? Спасибо.

Answer 1

Я полагаю, что ваша функция вызывается до того, как ваш блок "content" добавлен в DOM.

Вы можете подождать, пока DOM будет готов, прежде чем вызывать вашу функцию, или вызвать ее с кнопки следующим образом. :

function showContent() {
  document.getElementById('content').style.display = 'block';
}

.content {
  width: 200px;
  height: 100px;
  background: red;
}

<button onClick="showContent()">Show Block</button>

<div class="content" id="content" style="display: none">