How would I write these codes using for Loop instead of forEach?

well, that has been demonstrated already in post #2

I figured it out here:

I was missing this line:
const buttons = document.querySelectorAll(".playButton");

Now all the buttons change back.


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


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


    function showPauseButton(button) {
        const pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("active");
    }

How would I fix this?

Expected ‘;’ and instead saw ‘Array’.
const buttons = document.querySelectorAll(".playButton")

      function pauseAllButtons() {
          const buttons = document.querySelectorAll(".playButton")
          Array.from(buttons).filter(isPlaying).forEach(showPlayButton);
      }

Give it what it expects to see.

2 Likes

Got it:

    function pauseAllButtons() {
        const buttons = document.querySelectorAll(".playButton");
        Array.from(buttons).filter(isPlaying).forEach(showPlayButton);
    }
1 Like

looks like automatic semi-colon insertion has been disabled …

Maybe the code would need to be written a different way then.

That’s what jslint was asking for.

image

Code:

function pauseAllButtons() {
  const buttons = document.querySelectorAll(".playButton")
  Array.from(buttons)
    .filter(isPlaying)
    .forEach(showPlayButton)
}

Tidy does this to it:
jslint also prefers how this way is set up, and not the other way.

      function pauseAllButtons() {
          const buttons = document.querySelectorAll(".playButton")
          Array.from(buttons).filter(isPlaying).forEach(showPlayButton)
      }

What jslint was asking for:

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      Array.from(buttons)
        .filter(isPlaying)
        .forEach(showPlayButton);
    }

Tidy Version:
https://jsfiddle.net/pezuLqvo/158/

    function pauseAllButtons() {
        const buttons = document.querySelectorAll(".playButton");
        Array.from(buttons).filter(isPlaying).forEach(showPlayButton);
    }

What did you mean by this?

looks like automatic semi-colon insertion has been disabled

I was assuming that the message came from JavaScript itself, but it turned out (much later) that it actually was a linter message.

… automatic semi-colon insertion is a language feature of JS.

1 Like

oh, ok. just as long as everything is still ok with the code, then it’s all good.

Thanks for the clarification.

    function pauseAllButtons() {
        const buttons = document.querySelectorAll(".playButton");
        Array.from(buttons).filter(isPlaying).forEach(showPlayButton);
    }

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