HTML, JS, получение Uncaught TypeError: Невозможно установить свойство 'inner HTML' для null, когда переменная имеет значение

Question

Ситуация

У меня есть HTML, который я хотел бы отображать случайное слово каждый раз, когда оно перезагружается.

Проблема

У меня есть следующее HTML:

<h1 style="font-family: 'Oswald', ;">Alex is currently: <span style="color: rgba(25, 114, 120, 1);" id="status">Alive</span></h1>

Я хотел бы изменить значение status на случайное слово, отличное от живого. У меня есть эти переменные, хранящиеся в массиве, и у меня есть функция, которая запускает onload():

function changeStatus() {
   let statuses = ['Existing', 'Vibing'];
   let finalStatus = statuses[Math.floor(Math.random() * statuses.length)];
   document.getElementById('user').innerHTML = finalStatus;
}

Ошибка

Однако при перезагрузке страницы появляется следующая ошибка в консоли появляется:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Идеальный результат

Я хотел бы знать, что я делаю неправильно и как это исправить, в идеале просто Javascript но я могу использовать jQuery при необходимости.

Answer 1

function changeStatus() {
   let statuses = ['Existing', 'Vibing'];
   let finalStatus = statuses[Math.floor(Math.random() * statuses.length)];
   document.getElementById('status').innerHTML = finalStatus;
}

<h1 style="font-family: 'Oswald', ;">Alex is currently: <span style="color: rgba(25, 114, 120, 1);" id="status">Alive</span></h1>

<button onclick="changeStatus()">Change Status</button>

Answer 2

Нет элемента с идентификатором 'user'.

Заменить

document.getElementById('user').innerHTML = finalStatus;

на

document.getElementById ('status'). Inner HTML = finalStatus;

Answer 3

изменить user на status

function changeStatus() {
   let statuses = ['Existing', 'Vibing'];
   let finalStatus = statuses[Math.floor(Math.random() * statuses.length)];
   document.getElementById('status').innerHTML = finalStatus;
}

Answer 4

Вы получаете доступ к идентификатору user, который не существует. Возможно, вы хотели иметь

document.GetElementById('status')

Answer 5

Чтобы получить элемент статуса, вам нужно использовать идентификатор, который является 'status', а не пользователем

var _ele = document.getElementById ('status');

_ele.inner HTML = finalStatus;