Menu
I am creating an HTML page, Which is built using bootstrap. Here is the final HTML code and code of hello.js file:
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
Can anyone please tell me why I am facing this error?? Help to resolve it.
254
The problem seems to be you are executing the script before the element is loaded.
I assume this script is added in the hello.js file which is added before the DOM is created.
The solution here is to execute the script after the DOM is ready like:
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.
Demo: Fiddle
154
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:
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");
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
