document.getElementById('id') 为 null javascript 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3911350/
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
document.getElementById('id') is null javascript error
提问by Qcom
For some reason I get an document.getElementById('id') is nullJS error on line 7 with the following markup and script:
出于某种原因，我document.getElementById('id') is null在第 7 行收到了一个带有以下标记和脚本的JS 错误：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
document.getElementById('calculate').onclick = function calculateQuad()
{
var inputa = document.getElementById('variablea').value;
var inputb = document.getElementById('variableb').value;
var inputc = document.getElementById('variablec').value;
root = Math.pow(inputb,2) - 4 * inputa * inputc;
root1 = (-inputb + Math.sqrt(root))/2*inputa
root2 = (-inputb + Math.sqrt(root))/2*inputa
document.getElementById('root1').value = root1;
document.getElementById('root2').value = root2;
if(root<'0')
{
alert('This equation has no real solution.')
}
else {
if(root=='0')
{
document.getElementById('root1').value = root1
document.getElementById('root2').value = 'No Second Answer'
}
else {
document.getElementById('root1').value = root1
document.getElementById('root2').value = root1
}
}
};
document.getElementById('erase').onlick = this.form.reset();
</script>
<style>
#container
{
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
a:<input id="variablea" value="" type="text">
<br/>
b:<input id="variableb" value="" type="text">
<br />
c:<input id="variablec" value="" type="text">
<br />
<input id="calculate" value="Calculate!" type="button">
<input id="erase" value="Clear" type="button">
<br />
<br />
Roots:
<br />
<input id="root1" type="text" readonly>
<br />
<input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>
What's the real problem here?
这里真正的问题是什么？
回答by Jason McCreary
It is indeed null. Your element doesn't exist on the page yet.
确实如此null。您的元素尚不存在于页面上。
Either:
任何一个：
- Move your
<script>block below your code - Add a
window.onloadevent.
- 将
<script>块移动到代码下方 - 添加
window.onload事件。
回答by Explosion Pills
If you don't feel like including jQuery, then document.ready = function () {}will work fine too.
如果您不想包含 jQuery，那么document.ready = function () {}也可以正常工作。
回答by Azmisov
Alternatively: window.onload = function(){}works as well
或者：window.onload = function(){}也可以
回答by Zack
At the point which the javascript is actually run, there is no element with an id of 'calculate'. You need to make sure your javascript runs after your required elements have been created. My advice would be to use a common javascript framework like jquery. You would then just attach your script to run on dom ready:
在 javascript 实际运行时，没有 id 为“calculate”的元素。您需要确保在创建所需元素后运行 javascript。我的建议是使用像 jquery 这样的通用 javascript 框架。然后，您只需附加您的脚本即可在 dom 上运行：
$(document).ready(function() {
// Handler for .ready() called.
});
回答by Bang Dao
You can fix it by moving the script to the end of the body, or try to use window.onload, or window.addEventListenner
Check the http://v3.thewatchmakerproject.com/journal/168/javascript-the-dom-addeventlistener-and-attachevent
and http://javascript.about.com/library/blonload.htm
您可以通过将脚本移动到正文的末尾来修复它，或尝试使用window.onload, 或window.addEventListenner
检查http://v3.thewatchmakerproject.com/journal/168/javascript-the-dom-addeventlistener-and-attachevent
和http ://javascript.about.com/library/blonload.htm
回答by Anh Tran
- using windows.onload
- add link file script or script below "body end tag"
- 使用 windows.onload
- 在“正文结束标记”下方添加链接文件脚本或脚本
