在保持其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中。

根据问题，这不是一个正确的答案，但它是一个正确的＆＃34;回答我想要完成的事情。