document.getElementById().onmousedown does not work

Question

<html>
<style>
#myA {
    height: 300;
    width: 300;
    background: green;
}
</style>
<body>
<script language="JavaScript">

document.getElementById('myA').onmousedown = function() {
    var a = document.getElementById('myA');
    console.log(a);
}
</script>
<div id="myA"></div>
</body>
</html>

Please, why does not the code above work? When I want to write console.log, I get nothing, null value.

See also [Why does jQuery or a DOM method such as `getElementById` not find the element?](http://stackoverflow.com/q/14028959/1048572) — Bergi, Feb 13 '13 at 19:26

score 3 · Accepted Answer · answered Feb 13 '13 at 19:21

When your script runs, the myA element doesn't yet exist. Either:

move your script to the end of the page
put it in a named function that you call from another script block at the end of the page
put your code in window.onload
use jQuery to run your code after the DOM is built, via $().

score 0 · Answer 2 · answered Feb 13 '13 at 19:22

0

You have to write script below that div. Because div is not loaded yet. Or you can write function and this function call when the document is ready.

answered Feb 13 '13 at 19:22

Tom

642
4
13

score 0 · Answer 3 · answered Feb 13 '13 at 19:32

Wrap your code in a function and attach it to window.onload event, like this:

window.onload = function(e) {
    document.getElementById('myA').onmousedown = function() {
        var a = document.getElementById('myA');
        console.log(a);
    };
};

As the other guys said, it happens because you're trying to attach an event to an element that is not loaded yet.

document.getElementById().onmousedown does not work

3 Answers3