Dynamically creating a video in DOM result in a duplicated-CodePudding

I am new to JS and I am trying to create dynamic websites and learn from it. However I am struggeling as I have tried multiple codes and trials but I always have a duplicate video.

This is the HTML:

<div class="container" id="cnn">
        

</div>

This is the JS code:

function enter() {
 var video = document.createElement("video");
 video.type = "video/mp4";
 video.src = "../images/myMovie.mp4";
 video.autoplay = true;
 video.muted = true;
 video.id = "vdd"
 document.body.appendChild(video);

 var step2 = false;


video.addEventListener("timeupdate", function(){

// current time is given in seconds
if(this.currentTime >= 1) {
    // pause the playback
    this.pause();
    this.remove();
    step2 = true;
    if (step2 == true){
      document.getElementById("cnn").style.display = "inline"
      console.log("Test 1");
    
      const x = document.createElement("video");
      const brr = document.createElement("div");
    
      x.type = "video/mkv";
      x.src = "../images/space.mkv";
      x.autoplay = true;
      x.muted = true;
      x.id = "vdd1"
      
     brr.appendChild(x);
    
    // add the newly created element and its content into the DOM
    const currentDiv = document.getElementById("cnn");
    currentDiv.appendChild(brr);
    
    }
    
 }

});

}

CodePudding user response：

Please remove the child elements from the node before adding new element to that node

const currentDiv = document.getElementById("cnn");
currentDiv.innerHTML = "";
currentDiv.appendChild(brr);

CodePudding user response：

Try accessing the element directly to remove it, instead of referring to "this" rather query it from the DOM and remove it like that. You can access it through

document.getElementById("vdd").remove();

Unless I misunderstood what video was duplicated, if there is an issue with the second video, you never append the div to the document, you only append the new video to the div element, the element wont show up because of this.

Let me know if I misunderstood your issue. :)

CodePudding user response：

You are creating more than one <video>. video.addEventListener("timeupdate", function () { }) is called more than once before the first video is effectively removed.

I would suggest inverting the usage of step2 flag to make sure step2 is only executed once.

var video = document.createElement("video");
video.type = "video/mp4";
video.src =
  "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
video.autoplay = true;
video.muted = true;
video.id = "vdd";
document.body.appendChild(video);

var step2 = false;

video.addEventListener("timeupdate", function () {
  // current time is given in seconds
  if (this.currentTime >= 1) {
    // pause the playback
    this.pause();
    this.remove();
    if (step2 === false) {  // <-- SEE HERE
      step2 = true;         // <-- SEE HERE

      document.getElementById("cnn").style.display = "inline";
      console.log("Test 1");

      const x = document.createElement("video");
      const brr = document.createElement("div");

      x.type = "video/mp4";
      x.src =
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4";
      x.autoplay = true;
      x.muted = true;
      x.id = "vdd1";

      brr.appendChild(x);

      // add the newly created element and its content into the DOM
      const currentDiv = document.getElementById("cnn");
      currentDiv.appendChild(brr);
    }
  }
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container" id="cnn"></div>
    <script src="index.js"></script>
  </body>
</html>