CODEWITHSUNDEEP
javascripthtml
Jack
Jack

Reputation: 31

HTML and Javascript: how to set image as button?

Hello I have the following button and 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";
              }
            });

When i click my button it changes the button to a play icon image and when i click it again it changes it to a pause icon button. This works fine but it still displays the default button background. I want it to be just an image. It currently gives my a button GUI with an image in it. Thats not what I want, how can I fix it?

Upvotes: 0

Views: 954

Answers (2)

Marian Sabo
Marian Sabo

Reputation: 106

Probably you are not changing the value of 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";
          }
        });

Upvotes: 1

Marcin Dusza
Marcin Dusza

Reputation: 432

You can reset default <button> styles via CSS. This link might be helpful for you.

Upvotes: 0

Related Questions