what does this javascript logic mean?

I can't wrap my head around this code from w3schools for a javascript play/pause event.

let video = document.getElementById("myVideo");
let btn = document.getElementById("myBtn");

function myFunc() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}

if the video paused is true then the video should play and the btn should display Pause. But shouldn't it be the other way round? If the video is paused then video.pause() should be there?

video.pause()

if (video.paused) { video.pause() }

1 Answer
1

Remember, the action is performed when you click the button, so imagine if the video is playing and the function is executed, then the following snippet runs:

video.pause(); // the played video is now paused
btn.innerHTML = "Play"; // the button now shows 'Play' from what it was before 'Pause'


When the function is executed again (when it is paused) the code checks if it is paused and if it is then it means it needs to play hence the following snippet:

if (video.paused) { // Was the video paused? If yes...
video.play(); // We now play the video as it was paused
btn.innerHTML = "Pause"; // We changed the button text from 'Play' to 'Pause'
}


The comments in the above snippets should clarify further.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.