Question

HTML、JS，接收未捕获的类型错误：当变量有值时无法设置属性“innerHTML”为 null

2020-02-24

62

javascript html typeerror innerhtml

Situation

我有一个 HTML，我想在每次重新加载时显示一个随机单词。

Problem

我有以下 HTML：

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

我想将 status 的值更改为除 alive 之外的随机单词。我将这些变量存储在一个数组中，并且我有一个运行 onload() 的函数：

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

Error

但是，当我重新加载页面时，控制台中出现以下错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

Ideal outcome

我想知道我做错了什么以及如何修复它，理想情况下只使用 Javascript，但如果有必要，我也可以使用 jQuery。

Answer 1

您正在访问一个不存在的 id user 。可能您想要

document.GetElementById('status')

Prakhar Londhe

2020-02-24

Answer 2

没有 id 为“user”的元素。

将

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

替换为

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

Answer 3

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>