I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Share Improve this question edited Jan 15, 2016 at 22:25 gariepy 3,6846 gold badges23 silver badges34 bronze badges asked Apr 23, 2012 at 9:26 KichuKichu 3,26716 gold badges72 silver badges135 bronze badges6 Answers
Reset to default 3Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not remended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery./jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>