title: gamepad javascript failing to updated as expected
body: <p>I'm attempting to get the browser to report the status of my XBOX controller. However, it appears to become "stuck" after the first button press. What am I doing wrong?</p>
  
  <pre><code>&lt;body&gt;
      &lt;script&gt;
          var gamepad = false;
          var gamepadDIV = []
  
          window.addEventListener("gamepadconnected", function(e) {
              gamepad = e.gamepad;
  
              for (i = 0; i &lt; gamepad.buttons.length + gamepad.axes.length; i++) {
                  gamepadDIV.push(document.createElement('div'));
                  document.body.appendChild(gamepadDIV[i]);
              }
  
          });
  
          window.addEventListener("gamepaddisconnected", function() {
              gamepad = false;
          });
  
  
          function animation() {
  
              if (gamepad != false) {
  
                  for (i = 0; i &lt; gamepad.buttons.length; i++) {
                      gamepadDIV[i].innerHTML = gamepad.buttons[i].pressed;
                  }
  
                  for (i = gamepad.buttons.length; i &lt; gamepad.buttons.length + gamepad.axes.length; i++) {
                      gamepadDIV[i].innerHTML = gamepad.axes[i - gamepad.buttons.length].value;
                  }
  
              }
  
              window.requestAnimationFrame(animation);
          }
          animation();
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>