title: toggling a button with another while keeping its onclick event
body: <pre><code>        &lt;audio id='audio-player' controls='controls'&gt;
              &lt;source src='sound.wav' type='audio/wav'&gt;
              Your browser does not support the audio element,
          &lt;/audio&gt;
  
          &lt;button id='play' onclick="document.getElementById('audio-player').play(); document.getElementById('play').style.display='none'; document.getElementById('pause').style.display='block';"&gt;Play&lt;/button&gt;
          &lt;button id='pause' style='display: none' onclick="document.getElementById('audio-player').pause(); document.getElementsById('pause').style.display='none'; document.getElementsById('play').style.display='block';"&gt;Pause&lt;/button&gt;
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;"&gt;Rewind&lt;/button&gt;
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;"&gt;Stop&lt;/button&gt;
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;"&gt;Forward&lt;/button&gt;
  
          &lt;br&gt;
  </code></pre>
  
  <p>the expected response should be that clicking play gets rid of play and shows pause and vice versa (besides this the buttons themselves act as expected)</p>
  
  <pre><code>&lt;script&gt;
              function playPause() {
                          if (document.getElementById('play')) {
                              if (document.getElementById('play').style.display == 'none') {
                                  document.getElementById('play').style.display = 'block';
                                  document.getElementById('pause').style.display = 'none';
                              }
                              else {
                                  document.getElementById('play').style.display = 'none';
                                  document.getElementById('pause').style.display = 'block';
                              }
                          }
              }
          &lt;/script&gt;
  
          &lt;audio id='audio-player' controls='controls'&gt;
              &lt;source src='sound.wav' type='audio/wav'&gt;
              Your browser does not support the audio element,
          &lt;/audio&gt;
  
          &lt;div id="play"&gt;&lt;button onclick="document.getElementById('audio-player').play(); playPause();"&gt;Play&lt;/button&gt;&lt;/div&gt;
          &lt;div id="pause" style='display: none'&gt;&lt;button onclick="document.getElementById('audio-player').pause(); playPause();"&gt;Pause&lt;/button&gt;&lt;/div&gt;
  
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;"&gt;Rewind&lt;/button&gt;
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;"&gt;Stop&lt;/button&gt;
          &lt;button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;"&gt;Forward&lt;/button&gt;
  
          &lt;br&gt;
  </code></pre>
  
  <p>well i got it working with a bit of a different approach to the scenario.</p>
  
  <p>putting the buttons in divs.</p>