Changing forEach to for loop

This would get changed:

  function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
  }

to this:

  function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause, .speaker");
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }

This would get changed:

  function pauseAllButtons() {
    const buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

to this:

  function pauseAllButtons() {
    const buttons = document.querySelectorAll(".playButton");
    for (let i = 0; i < buttons.length; i += 1) {
      if (isPlaying(buttons[i])) {
        showPlayButton(buttons[i]);
      }
    }
  }

This would be changed to what?

I’m stuck on this one.
https://jsfiddle.net/psmt8vqd/7/

  const playButtons = document.querySelectorAll(".wrapb");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

Why don’t you show us what you’ve tried - that’s usually how we do it.

I tried this:
https://jsfiddle.net/psmt8vqd/10/

  const playButtons = document.querySelectorAll(".wrapb");
  for (let i = 0; i < playButtons.length; i += 1) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

First of all, why not use forEach?

But in any case, button has now definition here. You need something like playButtons[i];

1 Like

How would that be placed in the code?

With the forEach you are passing in an object for each element. But with the for loop you are just getting and index and accessing that element on the array yourself. So, instead of:

button.addEventListener("click", playButtonClickHandler);

you’d have something like:

playButtons[i].addEventListener("click", playButtonClickHandler);

I might suggest reviewing how arrays work. This is pretty basic JS. You my want to shore that up before moving on. You’ll get a lot more out of what you’re doing.

1 Like

Got it thank you.
https://jsfiddle.net/psmt8vqd/12/

  const playButtons = document.querySelectorAll(".wrapb");
  for (let i = 0; i < playButtons.length; i += 1) {
    playButtons[i].addEventListener("click", playButtonClickHandler);
    playButtons[i].addEventListener("mouseover", playButtonMouseoverHandler);
    playButtons[i].addEventListener("mouseout", playButtonMouseoutHandler);
  }
}());

Before:
https://jsfiddle.net/rfzx0ae4/1/

  const playButtons = document.querySelectorAll(".wrapb");
  playButtons.forEach(function(button) {
    button.addEventListener("click", initialOverlayClickHandler);
  });
}());

After:

How come this one isn’t working, and what would need to be adjusted in it?
https://jsfiddle.net/rfzx0ae4/12/

    const playButtons = document.querySelectorAll(".wrapb");
    for (let i = 0; i < playButtons.length; i += 1) {
        playButtons[i].addEventListener("click", playButtonClickHandler);
    }
}());

There is a different callback function in your addEventListener function.

1 Like

Fixed, I should have noticed that.
https://jsfiddle.net/rfzx0ae4/14/

    const playButtons = document.querySelectorAll(".wrapb");
    for (let i = 0; i < playButtons.length; i += 1) {
        playButtons[i].addEventListener("click", initialOverlayClickHandler);
    }
}());

How would I convert this to for Loop?
https://jsfiddle.net/Lyj70doe/7/

    playingEvents.forEach(function (eventName) {
        player.addEventListener(eventName, function () {
            canPlay = true;
            playPauseIcon(true);
        });
    });

I tried this:
https://jsfiddle.net/Lyj70doe/10/

for (let i = 0; i < playingEvents.length; i += 1) {
  player[i].addEventListener(eventName, function () {
            canPlay = true;
            playPauseIcon(true);
        });
    }

I tried this:
https://jsfiddle.net/Lyj70doe/9/

for (let i = 0; i < playingEvents.length; i += 1) {
  player[i].addEventListener(function() {
            canPlay = true;
            playPauseIcon(true);
        });
    }

What am I doing wrong, or forgetting to do?

In the original, you are looping through the playingEvents:

playingEvents.forEach(function (eventName) {

But in your attempts you are trying to index through the players?

player[i]...

In the original it looks like you are trying to add multiple events to one player, so you’d want something like this:

for (let i = 0; i < playingEvents.length; i += 1) {
  player.addEventListener(eventName[i], function () {
    canPlay = true;
    playPauseIcon(true);
  });
}

You have to think about what you are trying to loop through.

And again, why are you trying to go from “better” to “less good”? Using array methods like forEach is considered the better design pattern. They do the same thing, but array methods are considered better when you can use them - in some cases they perform better, but are often also considered more readable and superior. Most people are trying to go the opposite direction.

There’s still an error.
https://jsfiddle.net/Lyj70doe/20/

for (let i = 0; i < playingEvents.length; i += 1) {
  player.addEventListener(eventName[i], function () {
    canPlay = true;
    playPauseIcon(true);
  });
}

I think it would need to be written like this.

Right?
https://jsfiddle.net/spaozyxq/50/

    function setCanPlay() {
        canPlay = true;
        playPauseIcon(true);
    }

    for (let i = 0; i < playingEvents.length; i++) {
        player.addEventListener(playingEvents[i], setCanPlay);
    }

Without even looking at your fiddle., keep this in mind.

Whatever you loop through, then that’s what should have the [i].

In your example,. you have:
for (let i = 0; i < playingEvents.length; i += 1)

since you’re looping through playingEvents then you should be using:

playingEvents[i]

and not

player[i]

Which is exactly how it is set up here:

playingEvents[i]
https://jsfiddle.net/spaozyxq/50/

    for (let i = 0; i < playingEvents.length; i++) {
        player.addEventListener(playingEvents[i], setCanPlay);
    }

You have a typo in your code:

const playingEvents = ["canplay", "canplaytrough"];

You mispelled canplaythrough.

1 Like