错误 TypeError: document.getElementById(...) 在使用 javascript 添加文本 innerHTML 时为空？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14038952/
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
Error TypeError: document.getElementById(...) is null when add text innerHTML using javascript?
提问by Hai Truong IT
<textarea name="widget-generalcode" cols="50" rows="13" id="widget-generalcode"></textarea>
and javascript
和 javascript
<script>
document.getElementById('widget-generalcode').innnerHTML = 'test';
</script>
When I run code, error TypeError: document.getElementById(...) is null, how to fix it ?
当我运行代码时，出现错误TypeError: document.getElementById(...) is null，如何修复？
回答by Akhil Sekharan
May be you should put it on pageload:
也许你应该把它放在页面加载上：
<script type="text/javascript">
window.onload = function(){
document.getElementById('widget-generalcode').innerHTML = 'test';
};
</script>
回答by Phat H. VU
You should consider where you place javascript statements. It will effect to the desired result. I recommended that you should use web development tool such as Firebug in Firefox (press F12) It will help you to debug javascript code and you can use Timeline feature to detect which parts of your Html/javascript "spent" a lot of resources. Hope this information is useful.
您应该考虑放置 javascript 语句的位置。它将达到预期的结果。我建议您应该使用 Firefox 中的 Firebug 等 Web 开发工具（按 F12）它会帮助您调试 javascript 代码，您可以使用 Timeline 功能来检测您的 Html/javascript 的哪些部分“花费”了大量资源。希望这些信息有用。
回答by VisioN
First of all, check that your JavaScript is executed when DOM is loaded. One option is to put your <script>tag just before </body>.
首先，检查您的 JavaScript 是否在加载 DOM 时执行。一种选择是将您的<script>标签放在</body>.
Then, you should use valueproperty for form fields:
然后，您应该value对表单字段使用属性：
document.getElementById("widget-generalcode").value = "test";
回答by Nipun Jain
you are trying to access the element before it is rendered on your page so you will never get that element so write your code in function as below
您正在尝试在页面上呈现元素之前访问该元素，因此您永远不会获得该元素，因此请按如下方式编写代码
<script>
function call()
{
document.getElementById('widget-generalcode').value = 'test';
}
</script>
and now in body tag palce onload ="call()" as given below it will work
现在在正文标签 palce onload ="call()" 如下所示，它将起作用
<body onload ="call()" >
</body>
回答by sathish
Sorry I'm new 2 Stackoverflow
对不起，我是新来的 2 Stackoverflow
In asp.net Actualy Startup is my id but on clientside it will be displayed as ctl00_dmrcontent_Startup so in ur script change id form widget-generalcode to what display in clientside
在 asp.net 中，实际启动是我的 ID，但在客户端它会显示为 ctl00_dmrcontent_Startup 所以在你的脚本中将 id 表单小部件通用代码更改为客户端显示的内容
<div id="Startup" runat="server">
回答by user462990
This caused me much grief. It's a matter of understanding the sequence of execution of the "onLoad" (which occurs after all the PHP has been executed and turned into HTML), and the running of a js command after say parsing the url parameters (which occurs before onLoad).
这让我很伤心。这是理解“onLoad”的执行顺序（发生在所有 PHP 已执行并转换为 HTML 之后）以及解析 url 参数后运行 js 命令（发生在 onLoad 之前）的问题。
回答by Beta
The javascript function ran before the html page with rendered by the browser. So the element with the id="widget-generalcode" did not exist when the code ran.
javascript 函数在浏览器呈现的 html 页面之前运行。所以当代码运行时，id="widget-generalcode" 的元素不存在。
Use window.unload= functionName at the top of your javscript file, withoutparentheses (). This tells the browser to run the function afterthe html page loads. This way the html element will exist when the function runs and the javascript can act on it.
在 javscript 文件的顶部使用 window.unload= functionName，不带括号 ()。这告诉浏览器在 html 页面加载后运行该函数。这样，当函数运行时 html 元素将存在并且 javascript 可以对其进行操作。
