javascript - My function doesn't work inside onclick function -
i try write pendulum simulation canvas. goal change start angle clicking on animate button , stop 1 clicking stop. animate(a0deg) , clearinterval(id) doesn't work inside onclick functions.
if enter these functions console ok, works fine (for example can write clearinterval(id); , animation stop , animate(new_a0deg) , animation begin new start angle), if put functions inside onclick events - doesn't work. it's strange. ideas how fix it? please help. thank you.
by way link jsbin: http://jsbin.com/pafoteku/2/edit (important: in jsbin works way, not in local html file. 1 strange thing. after click on button everithing disappear).
problem here:
document.getelementbyid("animate").onclick = function () { //alert('onclick begin'); clearinterval(id); // < - doesn't work a0deg = document.getelementbyid("angle").value; animate(a0deg); // < - doesn't work //alert('a0deg = '+a0deg); }; document.getelementbyid("stop").onclick = function () { clearinterval(id); // < - doesn't work }; whole code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>pendulum</title> <style > canvas { background: #f0f0f0; border: 1px solid #ccc; } </style> </head> <body> <form > <label> angle: <input type="text" id="angle" name="angle" value="80" /> </label> <button id="animate" >animate</button> <button id="stop" >stop</button> </form> <canvas id="canvas" width="600" height="400"> <script> var a0deg = document.getelementbyid("angle").value; //a0deg start angle (deg) var id = null; //id of setinterval function animate(a0deg) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var fps = 60; //fps var f = 1000/fps; //time between frames var t = 0; //current time var l = 1; //phisical length of pendulum var a0 = math.pi*a0deg/180; //a0deg start angle (rad) var lcanvas = 300; //pendulum length on canvas (px) var g = 9.8 ; //g function draw() { t += f / 1000; ctx.clearrect(0, 0, 600, 400); ctx.save(); ctx.translate(300, 0); var theta = a0 * math.cos(t/(math.sqrt(l/g)))/math.exp(t/10); ctx.rotate(theta); ctx.strokestyle = '#000'; /* нить */ ctx.beginpath(); ctx.moveto(0, 0); ctx.lineto(0, lcanvas); ctx.linewidth = 1; ctx.stroke(); ctx.closepath(); ctx.beginpath(); /* груз */ ctx.arc(0, lcanvas, 5, 0, 2*math.pi, false); ctx.fill(); ctx.restore(); } id = setinterval(draw , f); } animate(a0deg); document.getelementbyid("animate").onclick = function () { //alert('onclick begin'); clearinterval(id); a0deg = document.getelementbyid("angle").value; animate(a0deg); //alert('a0deg = '+a0deg); }; document.getelementbyid("stop").onclick = function () { clearinterval(id); }; </script> </body> </html>
use
<button type="button" id="animate">animate</button> <button type="button" id="stop">stop</button> or
<input type="button" id="animate" value="animate" /> <input type="button" id="stop" value="stop" /> note unless use type="button", <button> elements can behave buggy in browsers.
and in case, behave submit button, send form, reloading page.
then, way of avoiding problem, using
button.onclick = function (e) { /* click event handler */ e && e.preventdefault && e.preventdefault(); return false; }; where e.preventdefault prevents sending form. note old browsers, don't support it, may need nonstandard (dom0) return false.
Comments
Post a Comment