document.getElementById fails in external JS

StackOverflow https://stackoverflow.com/questions/9471221

  •  13-11-2019
  •  | 
  •  

Question 

var canvas = document.getElementById('drawhere');
function Player(x,y,w,h){
    this.speed = 2;
    this.x = x;
    this.y = y;
    this.width = typeof x !== 'undefined' ? w : 10;
    this.height = typeof y !== 'undefined' ? h : 40;
    function move(direction){
        if (y > 0 && y < canvas.height){
            this.y += (this.speed * direction);
        }
    }
}
function Ball(x,y){
    this.x = typeof x !== 'undefined' ? x : canvas.width / 2;
    this.y = typeof y !== 'undefined' ? y : canvas.height / 2;
    this.direction = 1;
    this.speed = 3;
}
player1 = new Player(30,30);
player2 = new Player(canvas.width - 30,30)
ball = new Ball();
function draw(){
    var canvas = document.getElementById('drawhere');
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        ctx.fillRect(player1.x,player1.y,player1.width,player1.height);
        ctx.fillRect(player2.x,player2.y,player2.width,player2.height);
        ctx.beginPath();
        ctx.arc(ball.x,ball.y,5,Math.pi*2,true)
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }

}

That is my external JS file, and here is my html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style.css">

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>

  <script src="js/pong/main.js"></script>

</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div role="main">
    <canvas id="drawhere" width="400" height="300"></canvas>
    <script>window.onload = draw();</script>
  </div>
  <footer>

  </footer>



  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
  <!--pong -->

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->


</body>
</html>

For some reason I keep getting a null object for canvas I thought since I only call it once the document is loaded I would be fine. This is my first real JS project, so I'm probably doing something simple wrong. Sorry for the poor formatting, had some troubles with the editor.

Was it helpful?

Solution

The code that is at the beginning of your JS file is executed as soon as the JS file is loaded, which might be before DOM is ready. To prevent this, make sure everything in the JS file falls under a function and use that function onload.

Hope this helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top