Trying to figure out how to get fade to work

The user is wanting to target the curtain element which is two levels up from each video.

What does this pass to the openCurtain function?

Personally, I would rewrite the following:

const cover = evt.currentTarget.parentElement.parentElement;
const curtain = openCurtain(cover);

to be:

const curtain = evt.currentTarget.parentElement.parentElement;
openCurtain(curtain);

It makes it clear exactly what you are passing to the function.

1 Like

Is this good now? https://jsfiddle.net/jd3r7uxe/

Is this whatI am wanting to do, or no?

(function initCover() {

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

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

  function openCurtain(cover) {
    //hide(cover);
    const curtain = document.querySelector(".curtain");
    cover.classList.add("slide");
    return curtain;
  }

  /*function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }*/

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement.parentElement.parentElement;
    console.log(cover)
    const curtain = openCurtain(cover);
    /* showVideo(curtain);*/
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

I mean that is how I understood what you asked for. But we really can’t answer that for you. Is it working as intended or not?

Does it work as you want it to? If not, then you have your answer.

You still are trying to add the slide class to the first element with class="curtain" in your openCurtain function. I don’t know what else to tell you since you will not answer my other questions.

Also, you are targeting the wrong parentElement of the video.

1 Like

Doing it your way, what else needs to be fixed here?

https://jsfiddle.net/3ae1mu8q/1/

function openCurtain(cover) {
    const curtain = document.querySelector(".embed-youtube");
    curtain.classList.add("slide");
    return curtain;
  }

  /*function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }*/

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

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });

}());

I already told you what that selects and it is not the correct element.

Look at the other questions I asked you regarding openCurtain and please answer them for me.

For this CSS to work

.curtain.slide::after {
    outline: 1px solid #0059dd;
    transition: outline 2s ease-in;
}

The element with the class curtain should be given the class slide which is what you are doing now in that code.

Why don’t you at least answer if it is working as you wanted?

What does openCurtain(cover); pass to the openCurtain function?

That is the question you need to answer.

curtain.classList.add("slide");

It is, but I am doing it the other way now.

Is that your answer to my question?

It passes the cover.

function openCurtain(cover) {

to

const curtain = openCurtain(cover);

Can you post a link to the full code again? I want to check something. It is best if you do not keep creating new fiddles. Instead, just keep updating the same one, so we can use it as a reference.

https://jsfiddle.net/3ae1mu8q/2/

(function initCover() {

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

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

  function openCurtain(cover) {
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  /*function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }*/

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

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());

Alright, you did not make the changes to the variable names but that is fine. So you pass cover which in this case is evt.currentTarget.parentElement.parentElement (the correct “curtain” element).

Why not use it in your openCurtain function since you pass it to that function?

Which variable names was I supposed to change?

.curtain to something else?

I feel you are missing some basic JavaScript understanding here about how functions work.

Do you understand the difference between a function argument and a function parameter?

If so, what is the argument to the openCurtain function named and what is the parameter of the openCurtain function named currently?

openCurtain function named

cover is the argument.