의 onclick 이벤트를 유지하면서 서로의 버튼을 토글

Question

 <audio id='audio-player' controls='controls'> 
      <source src='sound.wav' type='audio/wav'> 
      Your browser does not support the audio element, 
     </audio> 

     <button id='play' onclick="document.getElementById('audio-player').play(); document.getElementById('play').style.display='none'; document.getElementById('pause').style.display='block';">Play</button> 
     <button id='pause' style='display: none' onclick="document.getElementById('audio-player').pause(); document.getElementsById('pause').style.display='none'; document.getElementsById('play').style.display='block';">Pause</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button> 

     <br> 

예상되는 응답 재생을 클릭하는 것은 (이 버튼 외에 자신이 예상대로 행동)

<script> 
      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'; 
          } 
         } 
      } 
     </script> 

     <audio id='audio-player' controls='controls'> 
      <source src='sound.wav' type='audio/wav'> 
      Your browser does not support the audio element, 
     </audio> 

     <div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div> 
     <div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div> 

     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button> 

     <br> 

플레이 제거와 쇼 일시 중지 반대의 경우도 마찬가지 가져옵니다해야한다

글쎄, 나는 시나리오에 대한 약간 다른 접근 방식으로 작업하고있다.

div에 버튼을 넣습니다.

Answer 1

<script> 
      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'; 
          } 
         } 
      } 
     </script> 

     <audio id='audio-player' controls='controls'> 
      <source src='sound.wav' type='audio/wav'> 
      Your browser does not support the audio element, 
     </audio> 

     <div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div> 
     <div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div> 

     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button> 
     <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button> 

     <br> 

글쎄, 나는이 시나리오에 약간 다른 접근법을 사용하고있다.

div에 버튼을 넣습니다.

질문에 따라 정답이 아니지만 성취하려는 내용에 대해 "올바른"대답입니다.