title: Image change pause/play javascript
body: <p>Javascript:</p>
  
  <pre><code>window.onload = intializePlayer;
  function vidplay() {
      var video = document.getElementById("music");
      var button = document.getElementById("play");
      if (video.paused) {
          video.play();
          button.style.background = "url(/resources/play.png)";
      } else {
          video.pause();
          button.style.background = "url(/resources/pause.png)";
      }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>button#play{
      background:url(../resources/pause.png);
      border:none;
      width:40px;
      height:40px;
      cursor:pointer;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button id="play" onclick="vidplay()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>The image doesn't seem to want to change when I click it. How can I get the image to change <code>onClick</code>?</p>