title: Javascript Play/Pause button Keyboard event
body: <p>I'm still working on a music player, mouse controls have been assigned, but I'm having little trouble with keyboard events on the PLAY/PAUSE button.</p>
  
  <p>So far, I got the user to be able to "click" the PLAY button by pressing SPACEBAR. What happens is that the PLAY button is being hidden and replaced by the PAUSE button.</p>
  
  <p>Which I want now is getting the user to be able to press the SPACEBAR again so it "clicks" PAUSE, and therefore shows PLAY again.</p>
  
  <p>Here is what I have :</p>
  
  <p>html</p>
  
  <pre><code>&lt;div&gt;
  
              &lt;a href="#" id="play"&gt; &lt;/a&gt; 
  
              &lt;a href="#" id="pause" style="display: none;"&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>script</p>
  
  <pre><code>&lt;script&gt;
  
  /* mouse */
  
      $('#play').on('click', function(event) {
          console.log('play click clicked');
      //currentPlayingTrack.play();
  
      $('#pause').show();
      $('#play').hide();
  
      $('#pause').on('click', function(event) {
      //currentPlayingTrack.pause();
  
      $('#pause').hide();
      $('#play').show();
      });
  
  /* keyboard */
  
  var play = document.getElementById("play");
  var pause = document.getElementById("pause");
  
  
  document.onkeydown = function (e) {
      if (e.keyCode == 32) {
          play.click();
      }
      else if(e.keyCode == 32) {
          pause.click();
      }
  }; 
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>What am I missing ?</p>