"Button" 应用JS函数后缩小

Question

我正在尝试构建一个计时器。我正在编写播放和重置按钮的代码。好像还不错，只是播放或重置按钮的“按钮”在我点击一次后会缩小，需要刷新才能恢复原来的大小。我试图查看我的代码是否有问题，我确信有问题，但我就是找不到。这是它应该看起来的样子。

但是点击之后，我得到了这个。

知道为什么会发生这种情况吗？所有回复或答案将不胜感激。谢谢！这是代码...

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      play.textContent = `Pause`;
    } else {
      song.pause();
      play.innerHTML = `Play`;
    }
  };
}

app();

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.play {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-right: 2rem;
}

.reset {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-left: 2rem;
}

<div class="player-container">
  <audio class="song">
    <source src="../sounds/bg-sound.mp3" />
  </audio>
  <div class="play">
    <h3>Play</h3>
  </div>
  <div class="reset">
    <h3>Reset</h3>
  </div>
</div>

Answer 1

这是因为默认情况下，“按钮”内有一个带有文本 Play 的 h3 标签，但单击后只有文本 Pause 就在“按钮”内".

在这些按钮中使用 h3 标签无论如何都是不正确的，所以请随时删除它们。 h3 标签具有语义意义，用于标题，而不用于样式。如果要使文本变大，请使用 CSS，而不是标签。

此外，不要为您的按钮使用简单的 div，而是使用 button 元素，因为这就是它的用途。

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      play.textContent = `Pause`;
    } else {
      song.pause();
      play.innerHTML = `Play`;
    }
  };
}

app();

.player-container {
  align-items: center;
  display: flex;
  justify-content: center;
}

button {
  background: #989c99;
  box-shadow: #656a66 0 6px 0;
  font-size: 1.5rem;
  margin-right: 2rem;
  padding: 1rem 2rem;
}

<div class="player-container">
  <audio class="song">
              <source src="../sounds/bg-sound.mp3" />
  </audio>
  <button class="play">
    Play
  </button>
  <button class="reset">
    Reset
  </button>
</div>

Answer 2

虽然我建议您切换到使用按钮而不是使用其中包含 h3 元素的 divs（推荐的其他答案基本上超过此答案），但您可以通过保持HTML内div一致：

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");

  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      play.innerHTML = `<h3>Pause</h3>`;
    } else {
      song.pause();
      play.innerHTML = `<h3>Play</h3>`;
    }
  };
}

app();

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.play {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-right: 2rem;
}

.reset {
  background: #989c99;
  box-shadow: #656a66 0px 6px 0px;
  padding: 1rem 2rem;
  margin-left: 2rem;
}

<div class="player-container">
  <audio class="song">
              <source src="../sounds/bg-sound.mp3" />
  </audio>
  <div class="play">
    <h3>Play</h3>
  </div>
  <div class="reset">
    <h3>Reset</h3>
  </div>
</div>

"Button" 应用JS函数后缩小

"Button" shrinking after applying JS function

html

javascript

css

button