Can this function be organized better?

Move the fadeResetHandler function above the const onAnimationEnd line, and on that onAnimationEnd line, don’t invoke the fadeResetHandler. It is the open and closed parenthesis that invoke the function. Don’t do that, refer to the fadeResetHandler function instead. Just use the fadeResetHandler name on that line with no parenthesis.

1 Like

What did I do wrong here: https://jsfiddle.net/1eb50mjL/

It’s still not working.

  function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    function fadeResetHandler() {
      const onAnimationEnd = fadeResetHandler;

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");

      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }
    body.addEventListener("animationend", onAnimationEnd);
  }

It was the very first thing that I asked you to do that hasn’t been done.

I think that you might be failing to understand what is meant by fadeResetHandler function

What do you understand that to mean?

When you said this:

Move the fadeResetHandler function above the const onAnimationEnd line,

I understood that to mean this:

This:

const onAnimationEnd = fadeResetHandler;
function fadeResetHandler() {

Becoming this:

function fadeResetHandler() {
const onAnimationEnd = fadeResetHandler;

Sorry but no. What you did there was to move the cost line into the function, by moving the function line up above the const statement.

There’s a huge difference between the function line, that being the line that has the start of the function, and the function itself.

The function is everything from the function keyword, the function name, the function parameters which are given in rounded parentheses, and the function body which is given in curly braces. Those curly braces define the scope of the function body.

Everything from the function keyword through to the closing brace is considered to be the function.

Recently I came across this lovely image that describes all of the parts of a function. This information might help you to understand some of the things that you are asked to do.

image

1 Like

If this is what you wanted me to do, what is the next thing I should do?

Knowing that the fade effect is no longer working in the code.

Maybe what is done next in the code will fix that.
https://jsfiddle.net/hv7Lwd62/

Can progress be made from here?

function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    function fadeResetHandler() {}
    const onAnimationEnd = fadeResetHandler;

    body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".container.hide");
    resetButtons(".outer");

    body.removeEventListener("animationend", onAnimationEnd);
    console.log("remove");

    body.addEventListener("animationend", onAnimationEnd);
  }

The fade effect is not working now in the code at the above spot.

It was last working here: https://jsfiddle.net/gqf35tys/

The fade effect occurs after clicking the exit button.

function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    const onAnimationEnd = function fadeResetHandler() {

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }
    body.addEventListener("animationend", onAnimationEnd);
  }

You have still screwed things up, failing to follow the directions you have been given.

Can you please show me what you consider to be the fadeResetHandler function from the original working code. I think that doing that will help to clear up some confusions that you seem to be having.

This is the original working code: https://jsfiddle.net/gqf35tys/

Where the only change that was made here was document changed to body.
And where fadeResetHandler was given as the function name.

function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    const onAnimationEnd = function fadeResetHandler() {

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }
    body.addEventListener("animationend", onAnimationEnd);
  }

This is what I consider to be the fadeResetHandler function:

const onAnimationEnd = function fadeResetHandler() {

}

That’s not correct, and I am assuming that you also intend that the content inside of the function is also included.

I think that we have narrowed down to find one of your misunderstandings.

The fadeResetHandler function only starts at the keyword function, and it ends at the closing curly brace.

When you are instructed to move the fadeResetHandler somewhere, it is only the text from the word function through to the closing curly brace that gets moved. Everything else remains the same.

Here is the fadeResetHandler function, shaded to help demonstrate more clearly.

function

When you are instructed to move the fadeResetHandler function somewhere, it is only the shaded part of the text that gets moved. Nothing else.

1 Like

What do I do after I do this? https://jsfiddle.net/t19y4d5m/

 function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    function fadeResetHandler() {

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }
    
    const onAnimationEnd = fadeResetHandler;

    body.addEventListener("animationend", onAnimationEnd);
  }

If you want me to next: delete this line: body.removeEventListener("animationend", onAnimationEnd);

This issue occurs
Issue:

Page changes back on its own

To reproduce , click on 1 svg play button, then click the Exit button .

Click on a 2nd svg play button and then don’t touch anything.

You will notice that the page goes back to the svg play buttons on its own without touching anything.

I want you to carry on with the instructions from post #100, which is to move that fadeResetHandler out of the resetPage function, to a location that’s just above the resetPage function.

That location outside of the resetPage function is needed for later plans, so that the fadeResetHandler function can be accessed from elsewhere in the code.

There are 2 things named fadeResetHandler

You didn’t say function, so I moved this: const onAnimationEnd = fadeResetHandler;

Above: function resetPage() {

Is this what you wanted me to do? https://jsfiddle.net/otLpqa1x/

Where I then receive the error:

fadeResetHandler is not defined

const onAnimationEnd = fadeResetHandler;

  function resetPage() {

    const body = document.body;
    body.classList.add("fadingOut");

    function fadeResetHandler() {

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }

    body.addEventListener("animationend", onAnimationEnd);
  }

Do you really find this to be an effective way to learn JavaScript? This entire thread is basically back and forth copy and pasting a provided answer little by little with no real problem solving on the others part. The only thing I can ascertain from this thread is the need for someone to step back and learn some basic JavaScript and programming concepts. After coming back to this and perhaps learning something rather than asking and waiting for step by step answers like a machine. Just copying and pasting step by step instructions like this isn’t programming neither is it going to be very effective teaching much.

6 Likes

Sorry, I can’t think of everything. It is the fadeResetHandler function that you are to move.

This? https://jsfiddle.net/r427dymv/

What do I do next?

 function fadeResetHandler() {

    function resetPage() {

      const body = document.body;
      body.classList.add("fadingOut");

      body.classList.remove("fadingOut");
      resetBackground("body");
      resetCurtains(".with-curtain");
      showAllButtons(".container.hide");
      resetButtons(".outer");
      body.removeEventListener("animationend", onAnimationEnd);
      console.log("remove");
    }

    const onAnimationEnd = fadeResetHandler;

    body.addEventListener("animationend", onAnimationEnd);
  }

It is the whole fadeResetHandler function that you need to move, not only the top line of the function.

The code stops working after the function is taken out. https://jsfiddle.net/cxsgj7tm/

function fadeResetHandler() {

    body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".container.hide");
    resetButtons(".outer");
    body.removeEventListener("animationend", onAnimationEnd);
    console.log("remove");
  }

  function resetPage() {
    const body = document.body;
    body.classList.add("fadingOut");

    /*body.classList.remove("fadingOut");
    resetBackground("body");
    resetCurtains(".with-curtain");
    showAllButtons(".container.hide");
    resetButtons(".outer");
    body.removeEventListener("animationend", onAnimationEnd);
    console.log("remove");
  }*/

    const onAnimationEnd = fadeResetHandler;

    body.addEventListener("animationend", onAnimationEnd);
  }

Yes, the code stops working here for a good reason. The function is in the correct place where it needs to be, and we just need to make a few adjustments to the function to get it working again.

1 Like

What are the adjustments that need to be made in the code?

It was a simple thing that was done to cause the problem, that simple thing being to move the fadeResetHandler function out of the resetPage function. So it should be a simple thing to fix the problem.

What causes the problem is that fadeResetHandler uses the body variable. That was defined in the resetPage function. The simple solution is to give fadeResetHandler access to the body element.

The fadeResetHandler function is an event handler, so it can easily access the event object through the first parameter in its parameter list. To reword slightly, the simple solution is to let the event handler access the event object. We don’t have a first parameter specified yet for the fadeResetHandler so that should be done first. Normally it’s a parameter of evt that is used to give event handlers access to the event object.

Because the event is happening on the body element:

    body.addEventListener("animationend", onAnimationEnd);

the event object contains a reference to that body element in a property called target, which we can assign to a variable called body. That is the simple stuff that needs to be done to fix the problem.

Alternatively we could instead just use document.body instead of body in the function, but that is a bad design because it guarantees that the function will break whenever the animationend event is changed to be on a different element. We don’t want code to break, we don’t want brittle code at all, which is why the event object is so beneficial when it comes to dealing with event handlers.