它说 TypeError: document.getElementById(...) is null [重复]答案

【问题标题】：It says that TypeError: document.getElementById(...) is null [duplicate]它说 TypeError: document.getElementById(...) is null [重复]
【发布时间】：2012-12-02 20:37:06
【问题描述】：

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

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

document.getElementById(elmId).innerHTML = value;

Line 75

除此之外，我想知道为什么不显示标题和时间，除非我单击其中一张播放列表图片？

【问题讨论】：

检查哪些 id 作为 elmId 传递，并确保您的页面上存在具有该 id 的元素。从我所见，您缺少几个元素。

标签： javascript dom runtime-error innerhtml getelementbyid

【解决方案1】：

在学生的作业中发现了类似的问题，脚本元素放在关闭body标签之后，所以很明显，JavaScript找不到任何HTML元素。

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

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

【讨论】：

在</body> 之后放置一个脚本元素应该会触发错误更正，将其插入到 DOM 中，就在</body> 之前，无论哪种方式，它仍然应该在文档中的其他所有内容之后并且能够找到任何in 文档中的元素。
对不起，也发现了另一个错误，在脚本元素之前引用的外部 JS 与我认为有问题的代码混淆了 HTML 内容。事实上，学生应该在链接的外部 JS 文件中添加代码，而不是添加新的脚本元素。刚刚更改了原始评论以反映这一点。

【解决方案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;
  }
}

【讨论】：

【解决方案3】：

我遇到了同样的错误。就我而言，我在一个页面中有多个具有相同 id 的 div。我重命名了使用的 div 的另一个 id 并修复了问题。

所以确认元素是否：

以 id 存在
没有与 id 重复的
确认脚本是否被调用

【讨论】：

【解决方案4】：

我也有同样的问题。它只是 javascript 的脚本加载得太快了——在 HTML 的元素加载之前。所以浏览器返回null，因为浏览器找不到你想要操作的元素在哪里。

【讨论】：

【解决方案5】：

确保将脚本放置在您要操作的文档的BODY 元素的底部，而不是HEAD 元素中或放置在之前你想“得到”的元素。

无论是导入脚本还是内联脚本都没有关系，重要的是放置。您也不必将命令放在函数中；虽然这是一种很好的做法，但您可以直接调用它，但效果很好。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案8】：

表示传递给getElementById()的id元素不存在。

【讨论】：