Question

我写了一个程序，当点击一个按钮时移动一个球。这是bigegr项目的实验的一部分：
这是屏幕截图：
website
这是代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Random Bouncing Ball</title>
<style type="text/css">
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
</style>
<script type="text/javascript">
function myFunction () {
    if(document.getElementById('button').clicked == true)
    {
        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
    }
}
</script>

</head>
<body>

<div id="container">

    <canvas id="myCanvas" width="400" height="300"></canvas>



</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>

</body>
</html>

问题是：当我点击该按钮时，球不会被动画或移动。我哪里错了？

Answer 1

第19行的代码返回undefined

document.getElementById('button').clicked == true

删除if语句并且它可以正常工作

我制作了一个jsbin：http://jsbin.com/sozicuruja/1/

function myFunction () {

        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        function draw(){
            context= myCanvas.getContext('2d');
            context.clearRect(0,0,400,400);
            context.beginPath();
            context.fillStyle="#000000";
            context.arc(x,y,10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
            if( x<0 || x>400)
            dx=-dx;
            if( y<0 || y>300)
            dy=-dy;
            x+=dx;
            y+=dy;
        }
        setInterval(draw,10); 
}

body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
h1 { display:block; width:600px; margin:20px auto; padding-bottom:20px; font:normal 24px/30px Georgia, "Times New Roman", Times, serif; color:#333; text-shadow: 1px 2px 3px #ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }

<div id="container">

    <canvas id="myCanvas" width="400" height="300"></canvas>



</div>
<input id="button" type="submit" name="button" value="enter" onclick="myFunction();"/>

Answer 2

此属性是否存在？如果您只想测试，可以这样做：

object.onclick=function(){myScript};

意味着什么：

document.getElementById('button').onclick = function () {
    draw();
};
   var context;
   var dx= 4;  
   var dy=4;
   var y=150;
   var x=10;

    function draw(){

        context= myCanvas.getContext('2d');
        context.clearRect(0,0,400,400);
        context.beginPath();
        context.fillStyle="#000000";
        context.arc(x,y,10,0,Math.PI*2,true);
        context.closePath();
        context.fill();
        if( x<0 || x>400)
        dx=-dx;
        if( y<0 || y>300)
        dy=-dy;
        x+=dx;
        y+=dy;
        setInterval(draw,10);
    }

小心那个setInterval：它会永远运行。您希望创建一些条件以使其在将来停止。 ;）

注意：我知道这个onclick属性是旧时尚，但它适用于所有市长浏览器。考虑使用jquery将函数附加到onclick事件。

单击按钮时使球反弹

2 个答案: