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

}

那是我的外部JS文件，这是我的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>

出于某种原因，我一直为canvas获取一个空对象我想，因为我只在文档加载后调用它我会没事的。这是我的第一个真正的JS项目，所以我可能做了一些简单的错误。抱歉格式不佳，编辑遇到了一些麻烦。

Answer 1

JS文件开头的代码会在加载JS文件后立即执行，这可能是在DOM准备好之前。为了防止这种情况，请确保JS文件中的所有内容都属于函数并使用该函数onload。

希望这有帮助。

document.getElementById在外部JS中失败

1 个答案: