title: Mousedown event listener for button press not working
body: <p>I'm building a pong emulator with plain vanilla javascript, you can see the code on <a href="http://codepen.io/RossCodes/pen/zxPJGM" rel="nofollow">Codepen</a> or <a href="https://github.com/ross8/pong" rel="nofollow">GitHub</a>.</p>
  
  <p>I want to use key press controls for computers and on screen button presses for mobile devices. I'm having trouble with the onscreen button presses. Starting on line 149 of the script, I am trying to update the value of the leftButtonPressed variable with event listeners:</p>
  
  <pre><code>//Storing control button presses
  
  var leftButton = document.getElementById('left-button'); //Get left button
  var leftButtonPressed = false; //variable to store whether or not the left button is pressed
  
  var leftMouseDown = function(){ //function to update leftButtonPressed
      leftButtonPressed = true;
  };
  
  var leftMouseUp = function(){ //funciton to update leftButtonPressed
      leftButtonPressed = false;
  };
  
  //Event listeners to see if left button is pressed
  
  leftButton.addEventListener('mousedown',leftMouseDown,false);
  leftButton.addEventListener('mouseup',leftMouseUp, false);
  
  //Printing left button press to screen
  
  var buttonPressedText = document.createTextNode(leftButtonPressed);
  var buttonPressedTextElement = document.getElementById('button-pressed');
  buttonPressedTextElement.innerHTML = '';
  buttonPressedTextElement.appendChild(buttonPressedText);
  </code></pre>
  
  <p>Why isn't my <code>leftButtonPressed</code> variable being updated?</p>
  
  <p>The following is extra info to understand the context of the script:</p>
  
  <p>I use the following to update my objects and repaint the canvas at 60 fps:</p>
  
  <pre><code>//Call step 60 times per second
  
  var animate = window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function (callback) { 
          window.setTimeout(callback, 1000 / 60); 
      };
  ;
  
  //Loop through update, render, animate
  
  var step = function() {
      score();
      update();
      render();
      animate(step);
  };
  </code></pre>
  
  <p>As you can see, the portion of the script to update <code>leftButtonPress</code> is run every time the player object is updated. </p>
  
  <p>Thanks for your help :)</p>