Question

document.getElementById(..) 为空

2015-03-28

153

javascript

我最近开始使用 Javascript，并尝试创建一个基本的 Breakout 游戏来练习。但是，当我制作桨及其运动时，Firebug 说 document.getElementById() 为空。我已经尝试了很多方法来解决这个问题，但都没有用。有人能帮我吗？

代码：

<html>
    <head>
        <title>Paddle</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            window.onload = addListeners();
            function addListeners(){
            document.getElementById('paddle').addEventListener('mousedown', mouseDown, false);
            window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseDown(e){
            window.addEventListener('mousemove', cuadroMove, true);
            }

            function cuadroMove(e){
            var cuadro = document.getElementById('paddle');
            cuadro.style.position = 'absolute';
            cuadro.style.top = e.clientY + 'px';
            cuadro.style.left = e.clientX + 'px';
            }
        </script>
    </head>
    <body>
    <div style="height:500px;width:500px;background-color:green;">
        <div id="paddle" style="width:100px; background-color:red">test</div>
    </div>
    </body>
</html>

Answer 1

您正尝试为 load 事件分配一个事件处理程序，但是：

window.onload = addListeners();

您正 立即调用 addListeners 并使用返回值 ( undefined ) 作为事件处理程序。

删除 () 。

Answer 2

这就是问题所在：

window.onload = addListeners();

它期望函数主体，而不是函数返回值，因此正确的方法是这样的：

window.onload = addListeners;

Answer 3

您应使用：

window.onload = addListeners;

或使用 jQuery 库 ( http://www.jquery.com )，onload 函数的快捷方式如下：

jQuery( function() {
 addListeners();
});

或：

jQuery(addListeners);

或：

window.addEventListener('load', addListeners, false);