我正在创建一个HTML页面,它是使用bootstrap构建的。以下是hello.js文件的最终HTML代码和代码:
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>
当我使用提交单击按钮时,而不是警告我收到错误
未捕获的TypeError:无法设置属性'onclick'为null
任何人都可以告诉我为什么我会遇到这个错误?帮助解决它。
答案 0 :(得分:18)
问题似乎是你在加载元素之前执行脚本。
我假设这个脚本添加在hello.js
文件中,该文件是在创建DOM之前添加的。
这里的解决方案是在DOM准备就绪后执行脚本,如:
window.onload = function(){
document.getElementById("subm").onclick=function(){
alert("Hello WOrld");
}
}
所有处理DOM元素的JavaScript代码都必须在加载DOM之后执行。
演示:Fiddle
答案 1 :(得分:3)
我看到你正在使用 JQuery 然后使用jQuery的函数为什么使用javascript。
以下是您想要的代码:
$(document).ready(function(){
$("#subm").click(function(){
alert("Hello World");
});
});
答案 2 :(得分:2)
可能正在发生,因为脚本在DOM加载之前运行。
尝试将脚本放入
window.onload = function() {
{your code}
}
答案 3 :(得分:2)
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");
}
});
答案 4 :(得分:0)
我遇到了类似的问题...对我而言,它使用了以下代码
$(document).on('click','#subm',function() {
alert("Hello World");
});