Changing Text Inside A Tag Onclick

I'm trying to change the text when clicking on a button. The button was created with a div :

Retour

Solution 1:

You have:

<divclass="pause"id="pause"onclick="playpause()"><ahref="#">Pause</a></div>

Because you have this, the link dissapears when you set the innerHTML of the div later.

To correct your issue and keep the a from dissapearing, you need to get the right DOM reference to it:

var anchor= document.querySelector("#pause > a");

Next, don't use inline HTML event handlers as they create spaghetti code and cause global event handling wrapper functions around your event code. These wrappers change the binding of this if used by your code.

Here's how to connect to an event handler that uses the W3C DOM Standard:

window.addEventListener("DOMContentLoaded", function(){
     var video = document.getElementById("bgvid");
     var pauseText = document.getElementById("pause");
     var anchor= document.querySelector("#pause > a");

     pauseText.addEventListener("click", function(){

        if (video.paused){
          video.play();
          anchor.innerHTML = "Pause";
        } else {
          video.pause();
          anchor.innerHTML = "Jouer";
        }

     });
 });

Amd, note the div code I showed at the top - - it no longer has the onclick="playPasue() in it.

Solution 2:

You can use firstElementChild of pause element. I guess problem is a tag is removed

So I'm able to change the text, but it's removing the a tag and removing my style

functionplaypause(){

var video = document.getElementById("bgvid");
var pauseText = document.getElementById("pause").firstElementChild;

if (video.paused){
    video.play();
    pauseText.innerHTML = "Pause";
} else {
    video.pause();
    pauseText.innerHTML = "Jouer";
}

}

Solution 3:

This should work.

document.getElementById("pause").onclick = function(){

  var video = document.getElementById("bgvid");
  var pauseText = document.querySelector("#pause a");

  if (video.paused){
      video.play();
      pauseText.innerHTML = "Pause";
  }else{
      video.pause();
      pauseText.innerHTML = "Jouer";
  }


}

<!-- Got video from http://www.w3schools.com/ --><videowidth="400"id="bgvid"><sourcesrc="http://www.w3schools.com/html/mov_bbb.mp4"type="video/mp4"><sourcesrc="http://www.w3schools.com/html/mov_bbb.ogg"type="video/ogg">
  Your browser does not support HTML5 video.
</video><divclass="pause"id="pause"><ahref="#">Pause</a></div>

Solution 4:

You must use it:

functionplaypause() {
    document.getElementById("pause").innerHTML = "Jouer";
}

<divclass="pause"id="pause"onclick="playpause()"><ahref="#">Pause</a></div>