javascript - 播放/暂停切换的问题

Question

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

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() {
  
});

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

<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>

上面的代码片段完成了我的 Chrome 应用程序所做的工作。单击播放按钮时，它会隐藏除上一个按钮以外的所有按钮。为什么会这样？

Answer 1

您的按钮并没有消失，它们只是在点击后掉落到下一行，因为它们的显示类型正在改变。

当页面加载时，按钮都显示为“inline-block”，因为它们是没有默认显示“block”的按钮元素。然而，一旦你点击了一个，你就会将它们的显示类型更改为“ block ”，所以中间的按钮现在被指示占据一整行，将上一个和下一个按钮推开，所以它全部包裹成三个行而不是停留在一行中。

为了修复它，我刚刚在您的 JavaScript 中将显示类型更改为“inline-block”而不是“block”。

我还在每个变量声明之前添加了“var”关键字，这样它们就不是分配给窗口对象的全局变量，但这不会给您带来任何问题。

尝试下面的代码片段，看看它是否按预期工作。

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() {
  
});

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

<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>