How to access .container3 with animationend removed from code

I currently have this: https://jsfiddle.net/u9h8fwz5/

The exit button is not clickable on page 2.

Why is it not clickable, and how is that fixed?

Would I be adding .container3 to this part?

I’m confused.

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

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

  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

Rest of the code:

.container2 .container {
  background: teal;
}

.container3 .container {
  background: red;
}
const manageCover = (function makeManageCover() {

  function showCover(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
  }

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    showCover(cover);
    const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
    openCurtain(curtain);
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function init( /*selectors*/ ) {
    //config.containers = document.querySelector(selectors.container);
    // const allContainers = document.querySelector(".container");
    //const playButtons = document.querySelector(selectors.playButton);
    const allPlaybuttons = document.querySelectorAll(".cover");
    //const allPlaybuttons = document.querySelectorAll(".embed-youtube-play");
    addClickToButtons(allPlaybuttons);
  }


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

const manageUI = (function makeManageUI() {


  const players = [];

  function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

  // inline arrow function, direct return
  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

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

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


  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

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

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


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

  }

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

This worked: https://jsfiddle.net/4Ld5tqrc/1/

How can this be improved?

(function showContainer2() {

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

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

  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

  const cover = document.querySelector(".exit");
  cover.addEventListener("click", exitClickHandler);
})();

(function showContainer3() {

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

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

  function exitClickHandler() {
    const thewrap = document.querySelector(".container3");
    show(thewrap);
    const cover = document.querySelector(".container2");
    hide(cover);
  }

  const cover = document.querySelector(".exit2");
  cover.addEventListener("click", exitClickHandler);
})();

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.