Making A Ball To Bounce When A Button Is Clicked

I wrote a program to move a ball when a button is clicked. It is a part of experiment for a bigegr project: Here is the screen shot: And here is the code:

Solution 1:

The code on line 19 returns undefined

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

remove that if statement and it works

I made a jsbin: http://jsbin.com/sozicuruja/1/

functionmyFunction () {

        var context;
        var dx= 4;  
        var dy=4;
        var y=150;
        var x=10;
        functiondraw(){
            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: 1px2px3px#ccc; border-bottom:1px solid #cbcbcb; }

#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#navli { display:block; font-weight:bold; line-height:21px; text-shadow:1px1px1px#fff; width:100px; height:21px; padding:5px; margin:010px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#navlia { color:#000; display:block; text-decoration:none; width:100%; height:100%; }

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

Solution 2:

Does this attribute exist? If you want only test, you can do this:

object.onclick=function(){myScript};

What means:

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

    functiondraw(){

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

Just be careful with that setInterval: it's gonna run forever. You want to create some condition to make it stop in the future. ;)

Note: I know this onclick attribute is old fashion but it works in all mayor browsers. Consider using jquery to attach functions to your onclick event.