HTML and Javascript: how to set image as button?

Question

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?

Marian Sabo · Accepted Answer · 2016-10-20 16:06:55Z

1

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

answered Oct 20, 2016 at 16:06

Marian Sabo

1066 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcin Dusza · Accepted Answer · 2016-10-20 16:00:05Z

0

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

answered Oct 20, 2016 at 16:00

Marcin Dusza

4423 silver badges10 bronze badges

Collectives™ on Stack Overflow

HTML and Javascript: how to set image as button?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related