2 votes

document.getElementById échoue dans les JS externes

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();
    }

}

C'est mon fichier JS externe, et voici mon 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>

Pour une raison quelconque, je continue à obtenir un objet nul pour canvas Je pensais que puisque je ne l'appelle qu'une fois le document chargé, tout irait bien. C'est mon premier vrai projet JS, donc je fais probablement quelque chose de simple et de mal. Désolé pour le mauvais formatage, j'ai eu quelques problèmes avec l'éditeur.

2voto

Sahand Points 774

Le code qui se trouve au début de votre fichier JS est exécuté dès que le fichier JS est chargé, ce qui peut être avant que DOM ne soit prêt. Pour éviter cela, assurez-vous que tout dans le fichier JS relève d'une fonction et utilisez cette fonction onload.

J'espère que cela vous aidera.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X