javascript - 如何单击一次同时更改文本和图标

Question

我想在用户点击播放图标时播放视频。当用户点击“播放”图标或“观看视频”文本时，视频应开始播放，“播放”图标和“观看视频”文本应分别变为“暂停”图标和“暂停视频”文本。

var vid = document.getElementById('myVideo');
var btn = document.getElementById("watch");

function playVid() {
  if (vid.paused) {
    vid.play();
    btn.classList.toggle("fa-pause-circle");
    btn.innerHTML = "Pause Video";
  } else {
    vid.pause();
    btn.classList.toggle("fa-play-circle");
    btn.innerHTML = "Watch Video";
  }

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />



<video id="myVideo">
         <source src="https://www.youtube.com/watch?v=rbHIDVVTSNA" type="video/mp4"> 
         Indian Spice Video
    </video>

<h3 onclick="playVid()" id="watch">
  <i class="fa fa-play-circle" aria-hidden="true"></i> Watch Video
</h3>

当用户第一次点击播放图标时，视频开始播放，字体变为“暂停视频”，图标也发生变化，但在 3-4 次点击图标消失后，正确的图标没有显示。

Answer 1

您不想切换要删除一个类并添加另一个类的类。您可以使用替换功能执行此操作当您切换时，将根据元素是否已经具有该类的事实添加或删除该类。

var vid = document.getElementById('myVideo');
var btn = document.getElementById("watch");

function playVid() {
  if (vid.paused) {
    vid.play();
    btn.classList.replace("fa-play-circle", "fa-pause-circle");
    btn.querySelector('.button_text').innerText = "Watch Video";
  } else {
    vid.pause();
    btn.querySelector('.fa').classList.replace("fa-pause-circle", "fa-play-circle");
    btn.querySelector('.button_text').innerText = "Watch Video";
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<video id="myVideo">
  <source src="https://www.youtube.com/watch?v=rbHIDVVTSNA" type="video/mp4"> 
  Indian Spice Video
</video>

<h3 onclick="playVid()" id="watch">
  <i class="fa fa-play-circle" aria-hidden="true"></i>
  <span class="button_text">Watch Video</span>
</h3>