After clicking on the exit button the page behind it should appear

After the exit button is clicked, the page behind it should appear.

https://jsfiddle.net/uLnb9a5t/

(function manageCover1() {

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

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container1");
    hide(cover);
    show(thewrap);
  }
  const cover = document.querySelector(".exit");
  cover.addEventListener("click", coverClickHandler);
}());

As an example, you can see how it works in this code. https://jsfiddle.net/wespkn7d/

Is this another topic on your video player clone project? If so, please do not make duplicate posts.

This is an entirely different javascript code.

If you look at both codes, they are entirely different.

The other code uses youtube api, this code does not.

You have a history of making a ton of separate topics about one project, so I had to ask.

What do you mean by page behind it? Do you mean an element behind it? If so, which element specifically are you talking about?

@JeremyLT This is still the same base project.

const thewrap = cover.parentNode.querySelector(".container1");

Put the following console.log immediately after this line:

console.log(thewrap);

Your selector did not find anything.

What is intended to happen is, clicking on the exit should unhide

<div class="container1 hide">

Trying to replicate what was done in the code example I provided.

I don’t see a div with class="container1 hide" in the HTML or at any other time during code execution.

I made a change: https://jsfiddle.net/vet8y601/

What is intended to happen is, clicking on the exit should unhide

<div class="container2 hide">

What would be the adjustments I would need to make for that to occur?

(function manageCover1() {

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

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container2");
    hide(cover);
    show(thewrap);
  }
  const cover = document.querySelector(".exit");
  cover.addEventListener("click", coverClickHandler);
}());

Is this actually finding anything?

<div class="container2 hide">

Is in the html.

Shouldn’t it be?

Is it actually finding that element?

Maybe this part needs to be written differently.

    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container2");

Think about where cover is located, then go back one parent level. The querySelector is trying to find an element within that parent that has a class of container2. You are not understanding what element cover is or what its parent is. console.log is one way of finding this out. The other is using the Inspector Tool in Chrome to click on various elements.

console.log(thewrap);

Doesn’t tell me anything.

It tells you something. What does console.log(thewrap) log?

Cannot read properties of null (reading ‘classList’)"

Right before that you get the actual output of console.log()
It’s easier of you include some text: console.log("thewrap:", thewrap)

But… that error message is telling you what’s wrong. You are trying to find the classList of null, so this line didn’t work:

Are there going to be multiple elements with the container2 class?

That is, is there a reason why you can’t just use document.querySelector(".container2")

no.

Only one with the hide on it.