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