Change img source with jQuery not changing image or functioning

Question

The #play-pause should change the src attribute. I've tried to use innerHtml but I can't input value like '/media/pauseButton.png" />'

var video = document.getElementById("postvideo");
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
    // Play the video
    video.play();
    // Update the button to 'Pause'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />";
} else {
    // Pause the video
    video.pause();

    // Update the button to 'Play'
    playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/pauseButton.png" />";
}

After refreshing, The #play-pause isn't changing and the function to video.pause(); no longer works.

What I want it to do is change the image source path to change from the play icon image to the pause icon image. Here is the initial output of the layout html on document ready:

<div id="play-pause">
    <img src="<?php echo get_template_directory_uri(); ?>/media/playButton.png" />
</div>

check your script & error log, I saw potential error in this line: playButton.innerHTML = "<img src="<?php echo get_template_directory_uri(); ?>/media/pauseButton.png" />"; — ariefbayu
– ariefbayu, Commented May 11, 2013 at 5:03
As ariefbayu mentioned, you want single quotes ' after the src on that line. playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/playButton.png' />"; — mash
– mash, Commented May 11, 2013 at 5:04
In Safari my error is a semantic issue where the alert says "Expected an identifier but found 'http' instead". Highlighted file opens the Wordpress embedded jquery.min.js but that seems too weird to have any errors in it. Chrome's error log reports Uncaught SuntaxError: Unexpected Token: etc... — canacast
– canacast, Commented May 11, 2013 at 5:20

Atle · Accepted Answer · 2013-05-11 05:28:22Z

1

Since you're using jQuery, you can get the elements using jQuery selectors, like $('#postvideo'); Also I would suggest having both images there all the time, and manipulate which one is showing using for example $('#play-pause').show() and $('#play-run').hide().

answered May 11, 2013 at 5:28

Atle

5,4871 gold badge17 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Change img source with jQuery not changing image or functioning

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related