Javascript 它说 TypeError: document.getElementById(...) is null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13885533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
It says that TypeError: document.getElementById(...) is null
提问by Tahtakafa
Althought I pushed a parameter to getElementById I wonder from where is this 'is null' error coming from?
虽然我向 getElementById 推送了一个参数，但我想知道这个“为空”错误来自哪里？
TypeError: document.getElementById(...) is null
[Break On This Error]
document.getElementById(elmId).innerHTML = value;
Line 75
In addition to this i wonder why title and time did not show unless I click one of these playlist pictures?
除此之外，我想知道为什么除非我单击这些播放列表图片之一才显示标题和时间？
采纳答案by bits
All these results in null:
所有这些结果null：
document.getElementById('volume');
document.getElementById('bytesLoaded');
document.getElementById('startBytes');
document.getElementById('bytesTotal');
You need to do a null check in updateHTML like this:
您需要像这样在 updateHTML 中进行空检查：
function updateHTML(elmId, value) {
var elem = document.getElementById(elmId);
if(typeof elem !== 'undefined' && elem !== null) {
elem.innerHTML = value;
}
}
回答by Olemak
Make sure the script is placed in the bottom of the BODY elementof the document you're trying to manipulate, not in the HEAD element or placed beforeany of the elements you want to "get".
确保脚本放置在您尝试操作的文档的 BODY 元素的底部，而不是 HEAD 元素中或放置在您想要“获取”的任何元素之前。
It does not matter if you import the script or if it's inline, the important thing is the placing. You don't have to put the command inside a function either; while it's good practice you can just call it directly, it works just fine.
无论您是导入脚本还是内联脚本，重要的是放置。您也不必将命令放在函数中；虽然这是一个很好的做法，你可以直接调用它，但它工作得很好。
回答by Marat Tanalin
It means that element with idpassed to getElementById()does not exist.
这意味着id传递给的元素getElementById()不存在。
回答by amar
You can use JQueryto ensure that all elements of the documents are ready before it starts the client side scripting
您可以使用JQuery确保在启动客户端脚本之前文档的所有元素都已准备就绪
$(document).ready(
function()
{
document.getElementById(elmId).innerHTML = value;
}
);
回答by Pradeep Kumar Prabaharan
I got the same error. In my case I had multiple div with same id in a page. I renamed the another id of the div used and fixed the issue.
我得到了同样的错误。就我而言，我在一个页面中有多个具有相同 ID 的 div。我重命名了使用的 div 的另一个 id 并解决了这个问题。
So confirm whether the element:
所以确认元素是否：
- exists with id
- doesn't have duplicate with id
- confirm whether the script is called
- 与 id 一起存在
- 没有重复的id
- 确认脚本是否被调用
回答by MarcoK
In your code, you can find this function:
在您的代码中，您可以找到此函数：
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
Later on, you call this function with several params:
稍后，您使用几个参数调用此函数：
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());
The first param is used for the "getElementById", but the elements with ID "bytesTotal", "startBytes", "bytesLoaded" and "volume" don't exist. You'll need to create them, since they'll return null.
第一个参数用于“getElementById”，但 ID 为“bytesTotal”、“startBytes”、“bytesLoaded”和“volume”的元素不存在。您需要创建它们，因为它们将返回 null。
回答by The Mr. Totardo
I have same problem. It just the javascript's script loads too fast--before the HTML's element loaded. So the browser returning null, since the browser can't find where is the element you like to manipulate.
我有同样的问题。它只是 javascript 的脚本加载太快——在加载 HTML 的元素之前。所以浏览器返回空值，因为浏览器找不到你想操作的元素在哪里。
回答by Mladen Janjic
Found similar problem within student's work, script element was put after closing body tag, so, obviously, JavaScript could not find any HTML element.
在学生的作业中发现了类似的问题，script 元素放在关闭 body 标签之后，所以很明显，JavaScript 找不到任何 HTML 元素。
But, there was one more serious error: there was a reference to an external javascript file with some code, which removed all contents of a certain HTML element before inserting new content. After commenting out this reference, everything worked properly.
但是，还有一个更严重的错误：引用了带有一些代码的外部 javascript 文件，该文件在插入新内容之前删除了某个 HTML 元素的所有内容。注释掉这个参考后，一切正常。
So, sometimes the error might be that some previously called Javascript changed content or even DOM, so calling for instance getElementById later doesn't make sense, since that element was removed.
因此，有时错误可能是某些先前调用的 Javascript 更改了内容甚至 DOM，因此稍后调用例如 getElementById 没有意义，因为该元素已被删除。
