Removing multiple resets from createResetHandler

[asasass]

Step 3 It is working properly.
https://jsfiddle.net/fjhtepmw/

Here I added console.log to it.

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

After Step 4 was done.

Nothing is coming up in console.log after the exit button is clicked.
https://jsfiddle.net/29L85f0r/

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

All that was done in Step 4 was:

This:

function createResetHandler(player) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", managePlayer.removePlayerHandler);
    });
  }

Became this:

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

Then I Added: createResetHandler(managePlayer.removeHandler);

To here:

function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createResetHandler(managePlayer.removeHandler);
  }

[asasass]

In Step 4 I think, createResetHandler(managePlayer.removeHandler);

Gets placed in here:

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

Even after I did that: https://jsfiddle.net/u976nmxv/

Still nothing is appearing inside console.log after the exit button is clicked.

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

[Paul_Wilkins]

I’m sorry, but you are calling some things step 3 and step 4, and I’m having a hard time understanding what those refer to because I didn’t put any steps in my post.

Can you please provide details about what you understand step 3 and step 4 to be?

[asasass]

That would have me confused also, sorry.

I gave them steps so it was easy for me to understand.

After I did Step 3, player.destroy(); continued working.

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

Step 3 post # 19
https://jsfiddle.net/fjhtepmw/

After I did Step 4, player.destroy(); stopped working.

Step 4 post #10
https://jsfiddle.net/u976nmxv/

And from there, the player parameter isn’t needed anymore, so a callback variable can be used there instead to refer to managePlayer.removeHandler

// function createResetHandler(player) {
  function createResetHandler(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback)
    });
  }
...
    // createResetHandler(player);
    createResetHandler(managePlayer.removeHandler);

[Paul_Wilkins]

I still don’t understand what you mean by step 3 and step 4. Can you please either quote the pieces that you are using for what you call step 3 and step 4, or please explain what you understand them to be in your own words. Thanks.

[asasass]

Following your instructions in post #19
player.destroy(); continued working.
https://jsfiddle.net/fjhtepmw/

Following your instructions in post #10
player.destroy(); stopped working.
https://jsfiddle.net/u976nmxv/

These are the instructions I followed in post #10 where player.destroy(); stopped working.

And from there, the player parameter isn’t needed anymore, so a callback variable can be used there instead to refer to managePlayer.removeHandler

  // function createResetHandler(player) {
  function createResetHandler(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback)
    });
  }
...
    // createResetHandler(player);
    createResetHandler(managePlayer.removeHandler);

To do that, I changed this: post #19
https://jsfiddle.net/fjhtepmw/

 function createResetHandler(player) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", managePlayer.removePlayerHandler);
    });
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createResetHandler(player);
  }

To this: post #10
Where player.destroy(); stopped working.
https://jsfiddle.net/u976nmxv/

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

[asasass]

I am currently up to this spot in the instructions in post #10

And from there, the player parameter isn’t needed anymore, so a callback variable can be used there instead to refer to managePlayer.removeHandler

  // function createResetHandler(player) {
  function createResetHandler(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback)
    });
  }
...
    // createResetHandler(player);
    createResetHandler(managePlayer.removeHandler);

To do that, I changed this:
https://jsfiddle.net/fjhtepmw/

 function createResetHandler(player) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", managePlayer.removePlayerHandler);
    });
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createResetHandler(player);
  }

To this:
Where player.destroy(); stopped working.
https://jsfiddle.net/u976nmxv/

Am I forgetting to do something?
or, am I doing something wrong?
Am I supposed to do something else after this?

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

[asasass]

I am trying to follow these instructions. post #10

Where I got up to this part: post #38

[asasass]

Following the instructions in post #10 I am up to implementing post #38

Where I am having difficulty getting this to work in the code.
https://jsfiddle.net/u976nmxv/

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

The code runs, but this is not working in the code:
player.destroy(); is not working

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

[Paul_Wilkins]

@asasass

Following your instructions in post #19
player.destroy(); continued working.

Sorry I had to stop reading your post here due to confusion. Post #19 has a lot of instructions. Was it after all of the instructions that it continued working? Or something else?

[asasass]

I followed all the instructions in Post #19.
Which is found at this link: https://jsfiddle.net/5svcu71p/

There is no issue with the code there, the code runs, and player.destroy(); works.

The next thing to follow in the instructions in post #10

Was to do this:
Which I attempted to do in post #38 but was not able to figure it out.

This is the spot in the code where player.destroy(); stopped working.
https://jsfiddle.net/u976nmxv/

I am having difficulty adding this into the code.

Is it more than just adding, copying and pasting this piece in, do other things need to be done also?

If yes, then I don’t know what the other things are.

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

[Paul_Wilkins]

Some reading of the text around that section of code is important because there are things said in there that you need to do.

[asasass]

From here: https://jsfiddle.net/u976nmxv/

Next is this:

And lastly, that createResetHandler shouldn’t be run every time a player is added, but only once when the page is loaded.

What are the instructions on how to do that in the code?

How do I prevent createResetHandler from running every time a player is added?

I am still a little confused as player.destroy(); is still not currently working in the code.

Should that issue be resolved first before preventing createResetHandler from running every time a player is added?

or is, preventing createResetHandler from running every time a player is added part of
having player.destroy(); work in the code?

How is this function:

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

Able to make contact to this function?

Is something supposed to be changed in here?

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

Currently, there is no connection between the two, I don’t believe.

How are both of those functions able to make contact with each other?

or, am I supposed to be doing something else there?

I was trying to have the code continue to stay working with each change I make to the code.

I don’t know if that is possible here.

That is the only way for me to know if I am doing something right, or wrong.

From here, is there a way for me to be able to do this in steps?

Would you be able to provide instructions where steps are involved where I would be able to follow each one?

This would help me to be able to do this in a more orderly way.

Right now I feel like I am stuck, and have been for the past 2 days.

I’m trying to make progress, but I don’t know what I need to be doing.

[Paul_Wilkins]

@asasass

Next is this:

And lastly, that createResetHandler shouldn’t be run every time a player is added, but only once when the page is loaded.

What are the instructions on how to do that in the code?

Read further along that very same paragraph and there are instructions on what needs to be done.

@Paul_Wilkins

And lastly, that createResetHandler shouldn’t be run every time a player is added, but only once when the page is loaded. Also the createResetHandler function doesn’t belong in the videoPlayer code because it deals with the exit buttons, so moving createResetHandler to the manageUI code needs to be done, along with adding a public method to the end of the manageUI code so that it can be accessed. This is also a good time to rename createResetHandler to addExitHandlers too.
so moving that to the start of the onYouTubeIframeAPIReady function is a good solution to that.

[asasass]

I did this: https://jsfiddle.net/w6no9cq0/

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

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

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

I don’t understand what this means:

so moving that to the start of the onYouTubeIframeAPIReady function is a good solution to that.

Something is being added right below this function?

But what is being added, I don’t understand.

function onYouTubeIframeAPIReady() {

You want me to remove addExitHandlers function from manageUI, and place it under onYouTubeIframeAPIReady, I don’t understand what you are having me do there.

I’m confused about that.

Do you want me to do this?

function onYouTubeIframeAPIReady() {

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

[Paul_Wilkins]

I want the addExitHandlers function to remain in the manageUI code. You added addExitHandlers to the return statement of manageUI. That is the right thing to do. addExitHandlers is said to be a public method of manageUI.

The addExitHandlers doesn’t get moved or copied to anywhere else. Instead, the onYouTubeIframeAPIReady should now invoke (or run, or call, or execute, they all tend to mean the same thing) that addExitHandlers public method.

[asasass]

I did this, but that did not work. https://jsfiddle.net/4t72jqLp/

function onYouTubeIframeAPIReady(addExitHandlers) {
  addExitHandlers();

I then tried this:

Is this what you wanted? https://jsfiddle.net/gpf5qjwb/

  manageUI.init({
  addExitHandlers: ".exit"
  });
}

[asasass]

I don’t think either of those is the right way.

[Paul_Wilkins]

@asasass

I did this, but that did not work. https://jsfiddle.net/4t72jqLp/

function onYouTubeIframeAPIReady(addExitHandlers) {
  addExitHandlers();

That didn’t work because with your call to that function, you are ignoring something that you shouldn’t ignore.

Look at the actual function and examine the function parameters. There you will find why what you did doesn’t work.

[asasass]

I still don’t understand.

I do understand, this is a function call.

addExitHandlers();

And that onYouTubeIframeAPIReady should call addExitHandlers();