CODEWITHSUNDEEP
javascript
Kichu
Kichu

Reputation: 3267

Call Onclick of Div Using javascript

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?

Upvotes: 0

Views: 6570

Answers (6)

nyson
nyson

Reputation: 1055

Edit: 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>

Upvotes: 3

srini
srini

Reputation: 884

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>

Upvotes: 0

Viet Anh
Viet Anh

Reputation: 139

I think you jquery solves your problem beautifully.

<script type="text/javascript" src="http://code.jquery.com/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

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

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 recommended since you remove any previous defined handler, if any)

Upvotes: 1

Manigandan Arjunan
Manigandan Arjunan

Reputation: 2265

<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>

Upvotes: 0

ONOZ
ONOZ

Reputation: 1410

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() {

Upvotes: 0

Related Questions