[英]How to display elements after button has been clicked?
我正在创建一个计时器应用程序,当我单击开始按钮时,计时器正在启动,但是我希望它显示暂停和播放按钮。 我几乎想做与开始按钮相反的操作。
我已经尝试将其设置为
middlebuttons.style.display= "block"
但这不起作用。
Java脚本
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>
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";
});
您应该遍历按钮并更新每个按钮的display
属性:
for (var i = 0; i < middlebuttons.length; i++) {
middlebuttons[i].style.display = "block";
}
// or
middlebuttons.forEach(function(btn) {
btn.style.display = "block";
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.