HTML und Javascript: Wie man Bild als Knopf setzt?

Question

Hallo Ich habe folgende Taste und JS-Code:

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

Wenn ich meine Button klicken, ändert sich die Schaltfläche, um ein Play-Symbol Bild, und wenn ich es klicken wieder ändert er es auf ein Symbol Pause-Taste. Dies funktioniert gut, aber es zeigt immer noch den Standardhintergrund der Schaltfläche an. Ich möchte, dass es nur ein Bild ist. Es gibt derzeit meine a Button-GUI mit einem Bild darin. Das ist nicht was ich will, wie kann ich es reparieren?

Answer 1

Sie können die Standardformate <button> über CSS zurücksetzen. Diese link könnte für Sie hilfreich sein.

Answer 2

Wahrscheinlich ändern Sie nicht den Wert von 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"; 
      } 
     });