Блог

Здравствуйте, у меня есть следующая кнопка и JS-код:

 <button type="button" id="play-pause" ><img id = "playbtn" src="img/icons/play.png"></button>
 playButton.addEventListener("click", function() {

              if (video.paused == true) {
                // Play the video
                video.play();

                // Update the button text to 'Pause'
                 document.getElementById("playbtn").src = "img/icons/pause.png";
              } else {
                // Pause the video
                video.pause();

                // Update the button text to 'Play'
                document.getElementById("playbtn").src = "img/icons/play.png";
              }
            });
  

Когда я нажимаю свою кнопку, она меняет кнопку на изображение значка воспроизведения, а когда я нажимаю ее снова, она меняет ее на кнопку со значком паузы. Это работает нормально, но по-прежнему отображает фон кнопки по умолчанию. Я хочу, чтобы это было просто изображение. В настоящее время он предоставляет мой графический интерфейс кнопки с изображением в нем. Это не то, что я хочу, как я могу это исправить?

Вероятно, вы не меняете значение video.paused

  playButton.addEventListener("click", function() {

          if (video.paused == true) {
            video.paused = false;
            // Play the video
            video.play();

            // Update the button text to 'Pause'
             document.getElementById("playbtn").src = "img/icons/pause.png";
          } else {
            video.paused = true;
            // Pause the video
            video.pause();

            // Update the button text to 'Play'
            document.getElementById("playbtn").src = "img/icons/play.png";
          }
        });
  

Вы можете сбросить <button> стили по умолчанию с помощью CSS. Эта ссылка может быть вам полезна.