javascript - 单击按钮后如何显示元素？

Question

我正在创建一个计时器应用程序，当我单击开始按钮时，计时器开始运行，但我希望它显示暂停和播放按钮。几乎我正在尝试做与我对开始按钮所做的相反的事情。

我已经试过设置为

middlebuttons.style.display= "block"

但这行不通。

Javascript

var startButton = document.getElementById("start");
var startSound = document.getElementById("audio"); 
var timerSound = document.getElementById("timer");
var counter = document.getElementById("counter");
var middlebuttons = document.getElementsByClassName("middlebuttons");
function playAudio(){
    startSound.play();
}

// Start button will disappear after click and countDown method will begin
function startTimer(){
    startButton.style.display="none"; 
    middlebuttons.style.display = "block";
    countDown(1);    
}

startButton.addEventListener('click', startTimer, playAudio);

HTML

 <div class="container">
        <div class="buttons">
                <button id ="start" type="button" onclick="playAudio()">Start</button>
                <audio id="audio">
                    <source src="clicksound.wav" type="audio/ogg "> 
                </audio>
                <audio id="timer">
                    <source src="gong.mp3" type="audio/ogg "> 
                </audio>
        </div>
        <div id="counter">

        </div>
        <div class="middlebuttons" style="display: none">
            <div class="row mr-3">
                <button id="pause" >
                    <i class="fas fa-pause" style="font-size: 40px"></i>
                </button>
                <button id="play">
                    <i class="fas fa-play" style="font-size: 40px"></i>
                </button>

            </div>
        </div>

    </div>

Answer 1

您应该遍历按钮并更新每个按钮的 display 属性:

for (var i = 0; i < middlebuttons.length; i++) {
  middlebuttons[i].style.display = "block";
}

// or

middlebuttons.forEach(function(btn) {
  btn.style.display = "block";
});