title: Toggle on/off buttons in Javascript
body: <p>I'm stuck. I've got two buttons with each a single function, one that plays a sound when clicked and one that pauses the sound when clicked. I want to be able toggle between them so I just see one button saying "Sound on" when it's off and vice versa. 
  Problem is: my Javascript knowhow! </p>
  
  <pre><code>&lt;audio id="spacesound"&gt; &lt;/audio&gt;
  &lt;button type="button" id="offbutton" class="offbutton" onclick="disableSound()"&gt;Sound off&lt;/button&gt;&lt;br&gt;
  &lt;button type="button" id="onbutton" class="onbutton" onclick="reenableSound()"&gt;Sound on&lt;/button&gt;
  </code></pre>
  
  <p>These are the buttons, and in case if necessary, the functions they call.   </p>
  
  <pre><code>//it plays on auto when the page is loaded
  myAudiothree = new Audio('media/deepspace.mp3');
  myAudiothree.loop = true;
  myAudiothree.play();
  
  //continue sound    
  function reenableSound()
  {
  myAudiothree.play();
  }
  
  //pause sound
  function disableSound()
  {
  myAudiothree.pause();
  }
  </code></pre>
  
  <p>There might be some CSS code for this but I'd much rather have it in JS, thank you!</p>