JavaScript 'ondragover' causing a console error, why?

Question

Why am I getting a console error "Uncaught TypeError: Cannot set property 'ondragover' of null"

<html>
  <head>
    <title></title>
    <script>

    var dragzone = document.getElementById('DragZone');

    dragzone.ondragover=function() {
        console.log("Bang");
        return false;
    };

    </script>

 </head>

<body>
    <div id="DragZone">Drag a file over here</div>
</body>
</html>

Wrap the code in `DOMContentLoaded` or move the script at the end of `` — Tushar, Oct 24 '15 at 15:25

score 2 · Accepted Answer · answered Oct 24 '15 at 15:26

You are trying to access the DOM element before it was created. Move the script to the bottom of <body> and it will work.

<html>
<head>
    <title></title>
</head>
<body>
    <div id="DragZone">Drag a file over here</div>
    <script>
        var dragzone = document.getElementById('DragZone');
        dragzone.ondragover=function() {
            console.log("Bang");
            return false;
        };
    </script>
</body>
</html>

JavaScript 'ondragover' causing a console error, why?

1 Answers1