Are these able to be wrapped in a named function?

JavaScript
1

or, maybe they aren’t meant to be when they are written this particular way.

These are two examples.

    const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");

    for (let i = 0; i < covers.length; i += 1) {
        covers[i].addEventListener("click", coverClickHandler);
    }

  const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
  const covers = document.querySelectorAll(coversSelector);
  
  for (let i = 0; i < covers.length; i += 1) {
    covers[i].addEventListener("click", coverClickHandler);
  }
2

I’m not sure what you’re trying to ask here. Of course this can be wrapped in a named function, this is like asking if you can put a collar on a dog. Can you clarify the question?

3

Actually, the code breaks when it is put inside a named function.

The cover no-longer stays hidden when it is inside a function.

Try putting it inside a named function, then click on a cover.

It, the cover no-longer stays hidden.

function addCoverListener(covers) {

}

This occurs.

4

This doesn’t make any sense at all. Can you clarify the question?

5

Try this in the code.

Wrapping this.

function addCoverListener(covers) {

}

With this.

  const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
  const covers = document.querySelectorAll(coversSelector);
  
  for (let i = 0; i < covers.length; i += 1) {
    covers[i].addEventListener("click", coverClickHandler);
  }

Gives me this.

The cover doesn’t stay hidden.

6

Are you calling the function after you wrap that block of code in it? You have to call it to run it.

7

The idea of the addCoverListener function came from a different thread post and is designed to be used with the forEach method.

1 Like
8

Then I’m not doing it correctly.

I would need to put this inside there somehow.

        const cover = evt.currentTarget;
        hide(cover);

Which would look similar to this.
if (players[i] !== event.target) players[i].pauseVideo();

So, I would be adding an if statement to it.

I got this far.

pauseVideo would need to be changed to something else.

I think I’m on the right track here.

Unless I’m doing something wrong.

I don’t even know if I’m doing this right.

It might not even be able to work set up like this.


function addCoverListener(evt) {
    const cover = evt.target;

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        if (covers[i] !== evt.target) covers[i].pauseVideo();
    }
}
9

That would explain why I couldn’t get it working inside a function.

A different method would need to work on for loop then.

Creating an if statement might work here, but I’m not entirely sure.

10

Can someone tell me if setting up an if statement here is going to work.

When the video is playing, or when the cover is clicked, the covers should be hidden.

Can this be done?

If it can, what would be the way to set that up?

function addCoverListener(evt) {
    const cover = evt.target;

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        if (covers[i] !== evt.target) covers[i].hideCovers();
    }
}

If that won’t work, what about something like this?

Do I even have the right idea?


function isPlaying(covers) {
      
    }

function addCoverListener(evt) {

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
               if (isPlaying(covers[i])) {
                hide(covers[i]);
            }
    }
}
11

If this can’t work like this, like you have said.

function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
}

function addCoverListener() {

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        covers[i].addEventListener("click", coverClickHandler);
    }
}

}());

Then this part would need to be placed as an if statement, removing the addEventListener line.

    const cover = evt.currentTarget;
    hide(cover);

That’s my current understanding if I have that right.

And now that’s the part I’m stuck on.

12

As I am looking at other code, I’m seeing that there is nothing inherently wrong with placing an addEventListener inside a for loop code.

  const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
  const covers = document.querySelectorAll(coversSelector);
  
  for (let i = 0; i < covers.length; i += 1) {
    covers[i].addEventListener("click", coverClickHandler);
  }

It just can’t be wrapped inside a function is my understanding.

  function addCoverListener() {
        const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
        const covers = document.querySelectorAll(coversSelector);

        for (let i = 0; i < covers.length; i += 1) {
            covers[i].addEventListener("click", coverClickHandler);
        }
    }
}());

Unless it is written like this, which I don’t know if it makes sense to write it like that. And so maybe written without it being in a function is better.
https://jsfiddle.net/m5s84kuj/

    function hookUpHandlers() {
        const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
        const covers = document.querySelectorAll(coversSelector);

        for (let i = 0; i < covers.length; i += 1) {
            covers[i].addEventListener("click", coverClickHandler);
        }
    }

    hookUpHandlers();
}());
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.