它报错说：TypeError: document.getElementById(...) 为空

Question

虽然我向getElementById传递了一个参数，但我想知道这个“为null”的错误是从哪里来的？

TypeError: document.getElementById(...) is null
[Break On This Error]   

document.getElementById(elmId).innerHTML = value;

Line 75  

此外，我想知道为什么除非我点击其中一个播放列表图片，否则标题和时间不会显示？

- mcan

---

检查传递为elmId的ID，并确保页面上存在具有该ID的元素。从我看到的情况来看，您缺少几个元素。 - asleepysamurai

Answer 1

确保将脚本放置在要操作的文档的BODY元素底部，不要放在HEAD元素中或放在您想要"获取"的任何元素之前。

无论是导入脚本还是内联脚本，重要的是它的位置。您也不必将命令放在函数内部; 虽然这是一个好习惯，但您可以直接调用它，这也可以正常工作。

- Olemak

Answer 2

所有这些结果都为 null：

document.getElementById('volume');
document.getElementById('bytesLoaded');
document.getElementById('startBytes');
document.getElementById('bytesTotal');

在updateHTML中，您需要进行空值检查，方法如下：

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if(typeof elem !== 'undefined' && elem !== null) {
    elem.innerHTML = value;
  }
}

- bits

Answer 3

这意味着传递给getElementById()的id元素不存在。

- Marat Tanalin

Answer 4

在客户端脚本开始之前，您可以使用 JQuery 确保文档的所有元素都已准备就绪。

$(document).ready(
    function()
    {
        document.getElementById(elmId).innerHTML = value;
    }
);

- amar

Answer 5

我遇到了相同的错误。在我的情况下，页面上有多个具有相同id的div。我将另一个div的id重命名并解决了这个问题。

所以请确认以下元素：

• 存在具有id的元素
• 没有具有相同id的重复元素
• 确认脚本是否被调用

- Pradeep Kumar

Answer 6

我有同样的问题。原因是JavaScript脚本加载得太快了——在HTML元素加载之前就已经加载完毕。因此，浏览器返回null值，因为无法找到您想要操作的元素的位置。

- The Mr. Totardo

Answer 7

在你的代码中，你可以找到这个函数：

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

稍后，您将使用多个参数调用此函数：

updateHTML("videoCurrentTime", secondsToHms(ytplayer.getCurrentTime())+' /');
updateHTML("videoDuration", secondsToHms(ytplayer.getDuration()));
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());

第一个参数用于“getElementById”，但是具有ID“bytesTotal”、“startBytes”、“bytesLoaded”和“volume”的元素不存在。你需要创建它们，因为它们将返回null。

- MarcoK

Answer 8

发现学生的作品中存在类似问题，脚本元素被放在关闭body标签之后，因此显然JavaScript找不到任何HTML元素。

但是，还有一个更严重的错误：引用了一个外部JavaScript文件，并且其中包含一些代码，该代码在插入新内容之前删除了某个HTML元素的所有内容。注释掉这个引用后，一切正常。

因此，有时错误可能是先前调用的JavaScript更改了内容甚至DOM，因此稍后调用例如getElementById没有意义，因为该元素已被删除。

- Mladen Janjic

---

将一个脚本元素放在 </body> 之后应该会触发纠错，使其在 </body> 之前插入到 DOM 中。无论如何，它仍应在文档中的所有其他内容之后，并且能够找到文档中的任何元素。 - Quentin

抱歉，发现另一个错误，外部JS在脚本元素之前被引用，我原以为有问题的代码正在干扰HTML内容。事实上，学生应该将代码添加到链接的外部JS文件中，而不是添加新的脚本元素。已更改原始注释以反映此情况。 - Mladen Janjic