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

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";
});

Answer 2

middlebuttons 是一个 HTMLCollection（就像一个数组），因此您需要循环遍历它并将样式应用于每个元素：

[...middlebuttons].forEach(button => button.style.display = "block");

旧版浏览器：

Array.prototype.slice.call(middlebuttons).forEach(function(button) {
    button.style.display = "block";
});

也在旧版浏览器上（感谢 connexo）：

Array.prototype.forEach.call(middlebuttons, function(button) {
    button.style.display = "block";
});