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

JavaScript
1

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/

2

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

3

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.

4

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

7

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.

9

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);
}());
10

Is this actually finding anything?

11

<div class="container2 hide">

Is in the html.

Shouldn’t it be?

12

Is it actually finding that element?

13

Maybe this part needs to be written differently.

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

console.log(thewrap);

Doesn’t tell me anything.

16

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

17

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

18

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:

19

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")

20

no.

Only one with the hide on it.

21

Am I able to still use cover?

const thewrap = cover.

22

Depends upon how you want to do this. You could use cover

23

What ways would it be able to be written?

24

We still aren’t here to write the code for you.