title: My function doesn't work inside onclick function
body: <p>I try to write pendulum simulation with canvas. My goal is to change start angle by clicking on Animate button and stop one by clicking Stop. But <strong>animate(a0deg)</strong> and <strong>clearInterval(id)</strong> doesn't work inside onClick functions.</p>
  
  <p>If I enter these functions to console everything is ok, it works fine (for example I can write <strong>clearInterval(id);</strong> and animation will stop and then <strong>animate(new_a0deg)</strong> and animation will begin with new start angle),
  but
  if I put this functions inside onClick events - its doesn't work. It's really strange. Any ideas how to fix it? Please help. Thank you.</p>
  
  <p>By the way link to jsbin: <a href="http://jsbin.com/pafoteku/2/edit" rel="nofollow">http://jsbin.com/pafoteku/2/edit</a> (<strong>Important</strong>: in jsbin it works another way, not like in local html file. This is another one strange thing. After click on button everithing disappear).</p>
  
  <p><strong>Problem here:</strong></p>
  
  <pre><code>document.getElementById("animate").onclick = function () {
      //alert('onClick begin');
      clearInterval(id); // &lt; - This doesn't work
      a0deg = document.getElementById("angle").value;
      animate(a0deg); // &lt; - This doesn't work
      //alert('a0deg = '+a0deg);
  };
  
  document.getElementById("stop").onclick = function () {
      clearInterval(id); // &lt; - This doesn't work
  };
  </code></pre>
  
  <p>Whole code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Pendulum&lt;/title&gt;
  
  &lt;style &gt;
  canvas {
    background: #f0f0f0;
    border: 1px solid #ccc;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;form &gt;
        &lt;label&gt;
          Angle:
          &lt;input type="text" id="angle" name="angle" value="80" /&gt;
        &lt;/label&gt;
        &lt;button  id="animate" &gt;Animate&lt;/button&gt;
        &lt;button id="stop" &gt;Stop&lt;/button&gt;
      &lt;/form&gt;
      &lt;canvas id="canvas" width="600" height="400"&gt;
  
    &lt;script&gt;
  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);
  };
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>