HTML和Javascript：如何将图像设置为按钮？

Question

你好，我有以下按钮和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"; 
       } 
      }); 

，当我点击我的按钮，它改变了按钮，播放图标的图像，当我再次点击它，它会变成一个暂停图标按钮。这工作正常，但它仍然显示默认的按钮背景。我希望它只是一个图像。它目前给我一个按钮的图形用户界面。那不是我想要的，我该如何解决它？

Answer 1

您可以通过CSS重置默认<button>样式。此link可能对您有所帮助。

Answer 2

也许你并没有改变的值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"; 
      } 
     });