播放/暂停切换问题

Question

我还没有发现任何与我完全一样的帖子，所以这就是问题所在。我正在制作一个MP3播放器，播放/暂停是两个单独的按钮。这是我的代码。

＆＃13;

＆＃13;

prevButton = document.getElementById("prevbtn");
playButton = document.getElementById("playbtn");
pauseButton = document.getElementById("pausebtn");
nextButton = document.getElementById("nextbtn");

prevButton.addEventListener("click", function() {
  
});
playButton.addEventListener("click", function() {
  playButton.style.display = "none";
  pauseButton.style.display = "block";
});
pauseButton.addEventListener("click", function() {
  playButton.style.display = "block";
  pauseButton.style.display = "none";
});
nextButton.addEventListener("click", function() {
  
});

＆＃13;

.bottomToolbar {
  width: 100%; height: 7%;
  background-color: rgb(30, 30, 30);
  text-align: center;
  position: absolute;
  left: 0; bottom: 0;
}

.bottomToolbar button {
  width: 7%; height: 100%;
  background: none;
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: center;
  background-color: rgb(150, 150, 150);
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
}

.bottomToolbar .prevButton {
  background-image: url("../icons/PrevIcon64.png");
}
.bottomToolbar .playButton {
  background-image: url("../icons/PlayIcon64.png");
}
.bottomToolbar .pauseButton {
  background-image: url("../icons/PauseIcon64.png");
  display: none;
}
.bottomToolbar .nextButton {
  background-image: url("../icons/NextIcon64.png");
}

＆＃13;

<div class="bottomToolbar">
  <button class="prevButton" id="prevbtn">Prev</button>
  <button class="playButton" id="playbtn">Play</button>
  <button class="pauseButton" id="pausebtn">Pause</button>
  <button class="nextButton" id="nextbtn">Next</button>
</div>

＆＃13;

＆＃13;

＆＃13;

上面的代码段完成了Chrome应用的功能。单击播放按钮时，它会隐藏除prev按钮以外的所有按钮。为什么会这样？

Answer 1

您的按钮不会消失，点击后它们会被放到下一行，因为它们的显示类型正在改变。

当页面加载时，所有按钮都显示＆＃34;内联块＆＃34;因为他们的按钮元素没有默认显示＆＃34; block＆＃34;。但是，一旦您点击了一个，您就会将其显示类型更改为＆＃34;阻止＆＃34;所以中间的按钮现在被指示占据整行，按下前一个和下一个按钮，所以它全部包裹成三行，而不是留在一行。

要修复它，我只是将显示类型更改为＆＃34; inline-block＆＃34;在您的JavaScript而不是＆＃34;阻止＆＃34;。

我还添加了＆＃34; var＆＃34;每个变量声明之前的关键字，以便它们不是全局变量分配给窗口对象，但这不会给你造成任何问题。

尝试下面的代码段，看它是否按预期运行。

＆＃13;

＆＃13;

var prevButton = document.getElementById("prevbtn");
var playButton = document.getElementById("playbtn");
var pauseButton = document.getElementById("pausebtn");
var nextButton = document.getElementById("nextbtn");

prevButton.addEventListener("click", function() {
  
});
playButton.addEventListener("click", function() {
  playButton.style.display = "none";
  pauseButton.style.display = "inline-block";
});
pauseButton.addEventListener("click", function() {
  playButton.style.display = "inline-block";
  pauseButton.style.display = "none";
});
nextButton.addEventListener("click", function() {
  
});

＆＃13;

.bottomToolbar {
  width: 100%; height: 7%;
  background-color: rgb(30, 30, 30);
  text-align: center;
  position: absolute;
  left: 0; bottom: 0;
}

.bottomToolbar button {
  width: 7%; height: 100%;
  background: none;
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: center;
  background-color: rgb(150, 150, 150);
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
}

.bottomToolbar .prevButton {
  background-image: url("../icons/PrevIcon64.png");
}
.bottomToolbar .playButton {
  background-image: url("../icons/PlayIcon64.png");
}
.bottomToolbar .pauseButton {
  background-image: url("../icons/PauseIcon64.png");
  display: none;
}
.bottomToolbar .nextButton {
  background-image: url("../icons/NextIcon64.png");
}

＆＃13;

<div class="bottomToolbar">
  <button class="prevButton" id="prevbtn">Prev</button>
  <button class="playButton" id="playbtn">Play</button>
  <button class="pauseButton" id="pausebtn">Pause</button>
  <button class="nextButton" id="nextbtn">Next</button>
</div>

＆＃13;

＆＃13;

＆＃13;