document.getElementById('id') is null JavaScript 错误
由于某种原因，我在第 7 行收到 document.getElementById('id') is null 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>
这里真正的问题是什么？
For some reason I get an document.getElementById('id') is null JS error on line 7 with the following markup and script:
<!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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
它确实是
null。您的元素尚不存在于页面上。或者：
window.onload事件。It is indeed
null. Your element doesn't exist on the page yet.Either:
<script>block below your codewindow.onloadevent.或者：
window.onload = function(){}也可以Alternatively:
window.onload = function(){}works as well如果您不想包含 jQuery，那么
document.ready = function () {}也可以正常工作。If you don't feel like including jQuery, then
document.ready = function () {}will work fine too.在 javascript 实际运行时，不存在 id 为“calculate”的元素。您需要确保您的 javascript 在创建所需的元素后运行。我的建议是使用通用的 javascript 框架，如 jquery。然后，您只需附加脚本即可在 dom 上运行：
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:
您可以通过将脚本移至正文末尾来修复此问题，或者尝试使用
window.onload或window.addEventListenner检查 http://v3.thewatchmakerproject.com/journal /168/javascript-the-dom-addeventlistener-and-attachevent
和 http://javascript.about.com/library/blonload.htm
You can fix it by moving the script to the end of the body, or try to use
window.onload, orwindow.addEventListennerCheck the http://v3.thewatchmakerproject.com/journal/168/javascript-the-dom-addeventlistener-and-attachevent
and http://javascript.about.com/library/blonload.htm