Html 未捕获的类型错误：无法设置 null 的属性“onclick”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17080502/
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
Uncaught TypeError: Cannot set property 'onclick' of null
提问by Ritesh Mehandiratta
I am creating an HTML page, Which is built using bootstrap. Here is the final HTML code and code of hello.js file:
我正在创建一个 HTML 页面，该页面是使用引导程序构建的。下面是最终的 HTML 代码和 hello.js 文件的代码：
document.getElementById("subm").onclick = function () {
alert("Hello WOrld");
}<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
<body>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script src="javascripts/hello.js"></script>
<h1>Calculator</h1>
<form class="form-horizontal center1">
<div class="control-group">
<label for="num1" class="control-label">Number1</label>
<div class="controls">
<input id="num1" type="number" placeholder="Enter an Integer">
</div>
</div>
<div class="control-group">
<label for="num2" class="control-label">Number2</label>
<div class="controls">
<input id="num2" type="number" placeholder="Enter an Integer">
</div>
<div class="control-group">
<label for="options" class="control-label">Options</label>
<div class="controls"><br>
<select id="options">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls"><br>
<button id="subm" type="submit" class="btn">Calculate</button>
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="cal" type="text" placeholder="Calculator output" disabled="true">
</div>
</div>
</div>
</form>
</body>When I click on the button using submit then instead of alert I am getting error
当我使用提交单击按钮而不是警报时，我收到错误
Uncaught TypeError: Cannot set property 'onclick' of null
未捕获的类型错误：无法设置 null 的属性“onclick”
Can anyone please tell me why I am facing this error?? Help to resolve it.
谁能告诉我为什么我面临这个错误？帮助解决它。
回答by Arun P Johny
The problem seems to be you are executing the script before the element is loaded.
问题似乎是您在加载元素之前执行脚本。
I assume this script is added in the hello.jsfile which is added before the DOM is created.
我假设此脚本已添加到hello.js创建 DOM 之前添加的文件中。
The solution here is to execute the script after the DOM is ready like:
这里的解决方案是在 DOM 准备好后执行脚本，如下所示：
window.onload = function(){
document.getElementById("subm").onclick=function(){
alert("Hello WOrld");
}
}
All JavaScript code which deals with DOM elements like the one above has to be executed only after the DOM is loaded.
所有处理上述 DOM 元素的 JavaScript 代码都必须在加载 DOM 后执行。
Demo: Fiddle
演示：小提琴
回答by codemania23
window.onload() didn't solve my problem so i had to write code to wait for the element to get loaded. You can do something like this:
window.onload() 没有解决我的问题，所以我不得不编写代码来等待元素被加载。你可以这样做：
function waitForLoad(id, callback){
var timer = setInterval(function(){
if(document.getElementById(id)){
clearInterval(timer);
callback();
}
}, 100);
}
waitForLoad("subm", function(){
console.log("load successful, you can proceed!!");
document.getElementById("subm").onclick = function()
{
alert("I got clicked");
}
});
回答by Code L?ver
As I see you are using the JQuerythen use the jQuery's function why are you using javascript.
正如我所看到的，您正在使用JQuery，然后使用 jQuery 的函数，为什么要使用 javascript。
Here is the code for you desire:
这是您想要的代码：
$(document).ready(function(){
$("#subm").click(function(){
alert("Hello World");
});
});
回答by JNF
It is probably happening because the script runs before the DOM loads.
这可能是因为脚本在 DOM 加载之前运行。
Try putting the script in
尝试将脚本放入
window.onload = function() {
{your code}
}
回答by user2427829
I had got a similar problem...For me it worked with following code
我遇到了类似的问题......对我来说它使用以下代码
$(document).on('click','#subm',function() {
alert("Hello World");
});
