JavaScript Trying to have the X button work

[htmlcssjavascript28]

Clicking on the button or around it should remove the player.

Adding code back in I was able to get this far with no errors:

no videos appearing though.

Edit fiddle - JSFiddle - Code Playground

Here is the code with videos appearing:

Edit fiddle - JSFiddle - Code Playground

Here is the full working code: has buttons: Edit fiddle - JSFiddle - Code Playground

Update: Here I have the videos appearing: Edit fiddle - JSFiddle - Code Playground

I think I am a bit closer of it working.

Next, trying to get remove player working.

That should appear in console log.

Working on this code: Edit fiddle - JSFiddle - Code Playground

 <div id="myModal" class="modal open">
  <div class="modal-content">
    <div class="blog-pager close">
      <a title="Exit" aria-label="Close"></a>
    </div><div class="container">
    <div class="ratio-keeper wrap">
      <div class="video " data-id="1Q1aDAnBsU8"></div>
    </div>  </div>
    <div class="playa"></div>
  </div>
</div>

const manageUI = (function makeManageUI() {

  function exitClickHandler() {
 
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".close");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".close");
    addClickToExit(exitButtons);
  }

  return {
    addExitHandlers,
    init
  };
}());

 function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

  function removePlayerHandler(evt) {
    const el = evt.target;
    //const container = el.closest(".container");
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

  function init() {
    manageCover.init({
      container: ".container"
    });

    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }

  return {
    add: addPlayer,
    init
  };
}());

 function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function exitClickHandler() {
    const thewrap = document.querySelector(".blog-pager");
    show(thewrap);
    const cover = document.querySelector(".close");
    hide(cover);
  }

 

[MilesWeb]

Current Functionality: Clicking the .close button triggers the exitClickHandler function.
exitClickHandler shows the .blog-pager element and hides the .close element.
This effectively hides the modal and video player.

Improvements for Removing Player: Target the video player directly: Instead of hiding the modal, consider directly removing the video player element from the DOM.

You can achieve this by Selecting the video element using wrapper. player.domNode (assuming the player is the video object).
Calling wrapper.player.domNode.parentNode.removeChild(wrapper.player.domNode) to remove the video element from its parent.

Optimize removePlayer function: You can simplify the removePlayer function by directly calling wrapper.player.destroy() without needing a separate delete wrapper.player.

Update removePlayerHandler: Modify the removePlayerHandler function to call the updated removePlayer function with the relevant wrapper element.

const manageUI = (function makeManageUI() {
  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButton) {
      exitButton.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".blog-pager");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".blog-pager");
    addClickToExit(exitButtons);
  }

  return {
    addExitHandlers,
    init,
  };
})();

const managePlayer = (function makeManagePlayer() {
  function removePlayerHandler(evt) {
    const el = evt.target;
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  }

  function init() {
    manageUI.init();
    manageUI.addExitHandlers(removePlayerHandler);
  }

  return {
    init,
  };
})();

function init() {
  managePlayer.init();
  manageUI.init();
}

// Call init to initialize the code
init();

In your addExitHandlers function, you are trying to add the click event to elements with the class .close. However, in your HTML, the close button is within the .blog-pager element. So, you should target .blog-pager instead of .close for event binding.

In the removePlayerHandler function, you are calling managePlayer.removePlayerHandler in addExitHandlers. Instead, you should directly call removePlayerHandler.

There's a typo in the line thewrap in exitClickHandler. It should be theWrap.

Initialize the Code: Ensure that you call init function for both managePlayer and manageUI to initialize the code.

 

[htmlcssjavascript28]

This is what I have now: Edit fiddle - JSFiddle - Code Playground

 

[htmlcssjavascript28]

Working Code: Edit fiddle - JSFiddle - Code Playground

In the code below, I was trying to remove at least one player, then I could figure out how to do the others.

I am trying to have this part work in the code:

Code I am working on: Edit fiddle - JSFiddle - Code Playground

I am thinking it should be able to work this code.

Clicking the X button should remove the player.

This is the part from the working code that is responsible for removing the player.

const manageUI = (function makeManageUI() {
  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exitA");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  return {
    addExitHandlers
  };
}());

function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }


  function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".containerA"); // Changed ".container" to ".containerA"
    const wrapper = container.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

const loadPlayer = (function uiLoadPlayer() {
  function addPlayer(playerSelector, playerOptions) {
    const parent = document.querySelector(playerSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    callback();
  }


  manageUI.addExitHandlers(managePlayer.removePlayerHandler);
 
  return {
    add: addPlayer
  };
}());

 

[htmlcssjavascript28]

MilesWeb gave me instructions, I tried to follow them here: Edit fiddle - JSFiddle - Code Playground

I don't think I understand how to implement them in the code.

I am trying to implement it as close to the working code: Edit fiddle - JSFiddle - Code Playground

How the remove player is implemented in there, I am trying to implement that in the code I am working on.

I think after I am able to figure out how to remove one video, I would be better able to understand how to do this.

 

[htmlcssjavascript28]

Look at how it is implemented in the working code: Edit fiddle - JSFiddle - Code Playground

This doesn't seem right, my attempt. https://jsfiddle.net/60cguhr3/3/

function removePlayerHandler(evt) {
    const el = evt.target;
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  }
 
  function initPlayer(wrapper, playerOptions) {
    createPlayer(wrapper, playerOptions);
  }


  return {
    adder: playerAdder,
    removePlayerHandler
  };
}());


const loadPlayer = (function uiLoadPlayer() {
  function addPlayer(playerSelector, playerOptions) {
    const parent = document.querySelector(playerSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    callback();
  }
 
   function init() {
   manageUI.init({});
   manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }


  return {
    init,
    add: addPlayer
  };
})();


 function init() {
  managePlayer.init();
  manageUI.init();
  }
 
loadPlayer.init();

 

[htmlcssjavascript28]

Working Code: Edit fiddle - JSFiddle - Code Playground Where remove player works.

In the working code, After you click a button, play a video, then click the exit button where it is destroyed.

At this code here is my last working code where all videos are visible on the screen:

Code I am working on: Edit fiddle - JSFiddle - Code Playground

I tried my best to follow the instructions given to me from MilesWeb.

I need some help figuring out how to do this.

This is what I have:

const manageUI = (function makeManageUI() {


  function exitClickHandler(event) {
    // Your code here. For example:
    console.log("Exit button clicked!");
  }


  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButton) {
      exitButton.addEventListener("click", exitClickHandler);
    });
  }


  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }


  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
  }


  return {
    addExitHandlers,
    init
  };
})();

function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }


  function removePlayerHandler(evt) {
    const el = evt.target;
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  }
 
  function initPlayer(wrapper, playerOptions) {
    createPlayer(wrapper, playerOptions);
  }


  return {
    adder: playerAdder,
    removePlayerHandler
  };
}());

const loadPlayer = (function uiLoadPlayer() {
  function addPlayer(playerSelector, playerOptions) {
    const parent = document.querySelector(playerSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    callback();
  }
 
   function init() {
   manageUI.init({});
   manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }


  return {
   add: addPlayer,
   init
  };
})();


 function init() {
  managePlayer.init();
  manageUI.init();
  }
 
loadPlayer.init();

 

[Johna]

Hi there, can you explain what your current problem is, and what you're trying to achieve?

 

[htmlcssjavascript28]

Exactly how it works in the working code here: Edit fiddle - JSFiddle - Code Playground

In the above console log, when a video is playing, click the exit button, it says remove player.

What is used in there:

Code I am working on: Edit fiddle - JSFiddle - Code Playground

Clicking the exit button should remove the player.

 

[Johna]

If it's working in the working code that you linked, then I'm not sure I understand what you're asking.

 

[htmlcssjavascript28]

I am trying to implement the same functionality in here:

Code I am Working On: Edit fiddle - JSFiddle - Code Playground

 

[Johna]

The exit player button seems to be working in both of the code's you provided. Are the certain steps I should follow to reproduce the issue?

 

[htmlcssjavascript28]

Play a video in this code: Edit fiddle - JSFiddle - Code Playground

Then click the exit button.

removePlayer does not apper in the console log.

function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

 

[htmlcssjavascript28]

Last attempt: Edit fiddle - JSFiddle - Code Playground

const manageUI = (function makeManageUI() {


  function exitClickHandler(event) {
    // Your code here. For example:
    console.log("Exit button clicked!");
  }


  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButton) {
      exitButton.addEventListener("click", exitClickHandler);
    });
  }


  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }


  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
  }


  return {
    addExitHandlers,
    init
  };
})();

function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }


  /*function removePlayerHandler(evt) {
    const el = evt.target;
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  }*/


  function removePlayerHandler(evt) {
    const wrapper = evt.target.closest(".wrap");
    if (wrapper && wrapper.player) {
      removePlayer(wrapper);
    }
  }


  function initPlayer(wrapper, playerOptions) {
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }


  return {
    adder: playerAdder,
    removePlayerHandler
  };
}());


const loadPlayer = (function uiLoadPlayer() {
  function addPlayer(playerSelector, playerOptions) {
    const parent = document.querySelector(playerSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    callback();
  }


  function init() {
    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }


  return {
    add: addPlayer,
    init
  };
})();


loadPlayer.init();

 

[Johna]

function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

Could you walk me through what is supposed to happen in the JavaScript when the exit button is clicked, and when this function is supposed to be called?

 

[htmlcssjavascript28]

I am going to hold off working on this.