Combining 3 functions into a single function

javascriptcoding5678 · August 25, 2019, 8:33pm

Instead of using:

.jacket-left, .jacket-middle, jacket-right.

I would just be using .jacket

To target all 3 covers.

How would this be written?

I was thinking this, but how would it be written into the code?
const cover = document.querySelectorAll(".jacket");

The original code
https://jsfiddle.net/yg6w3xr9/

(function manageCover() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
  }
  
  const cover = document.querySelector(".jacket-left");
  cover.addEventListener("click", coverClickHandler);
}());


(function manageCover() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
  }
  const cover = document.querySelector(".jacket-middle");
  cover.addEventListener("click", coverClickHandler);
}());


(function manageCover() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
  }
  const cover = document.querySelector(".jacket-right");
  cover.addEventListener("click", coverClickHandler);
}());

luishendrix92 · August 25, 2019, 9:03pm

Your problem resides in that you have 3 different classes with almost the same purpose and you add the same function as a click handler for all 3 different classes.

The solution would be simple, to add an extra class to all 3 different classes called “jacket” specifically for that sole purpose.

const covers = document.querySelectorAll('.jacket')

for (let cover of covers) {
  cover.addEventListener('click', (evt) => {
    evt.currentTarget.classList.add('hide')
  })
}

Notice the all in querySelectorAll, this is in case you have more than 1 DOM element that you want to select.

javascriptcoding5678 · August 25, 2019, 9:07pm

How would it be written without the arrow function?

What would be used instead of this?
=>

luishendrix92 · August 25, 2019, 9:07pm

A normal anon function

blabla.blabla(blabla, function(evt) {
  // your stuff
});

javascriptcoding5678 · August 25, 2019, 9:11pm

This would be changed to what then?

I wasn’t able to get it.

for (let cover of covers) {
  cover.addEventListener('click', (evt) => {
    evt.currentTarget.classList.add('hide')
  })
}

javascriptcoding5678 · August 25, 2019, 9:24pm

I didn’t get it.

I did it wrong.


 const covers = document.querySelectorAll('.jacket')
  for (let cover of covers) {
 cover.addEventListener('click', function(evt) {
 evt.currentTarget.classList.add('hide')
  })
}

luishendrix92 · August 25, 2019, 9:32pm

Works for me, did you add the jacket class to your HTML elements?

https://codepen.io/luishendrix92/pen/RwbpZPr?editors=1010

If you don’t want to, you can always use Randell’s advice and do .querySelectorAll('.class1, .class2, .class3')

javascriptcoding5678 · August 25, 2019, 9:35pm

Got it:
https://jsfiddle.net/7gryfnsh/4/

    const covers = document.querySelectorAll('.jacket')

    for (let cover of covers) {
        cover.addEventListener('click', function (evt) {
            evt.currentTarget.classList.add('hide')
        })
    }

javascriptcoding5678 · August 25, 2019, 9:39pm

How would this one be written without the arrow function?

  const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");
  covers.forEach(cover => {
    cover.addEventListener("click", coverClickHandler);
  });

javascriptcoding5678 · August 25, 2019, 9:42pm

How would his be written without the arrow function?

  const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");
  covers.forEach(cover => {
    cover.addEventListener("click", coverClickHandler);
  });

javascriptcoding5678 · August 25, 2019, 9:53pm

I tried by looking to see how it was done with this code.

    const covers = document.querySelectorAll('.jacket')

    for (let cover of covers) {
        cover.addEventListener('click', function (evt) {
            evt.currentTarget.classList.add('hide')
        })
    }

I didn’t get it.

   const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");
  covers.forEach(cover {
   cover.addEventListener('click', function coverClickHandler);
}());

javascriptcoding5678 · August 25, 2019, 10:06pm

Got it.
https://jsfiddle.net/o5dkr8hs/2/

    const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");
    covers.forEach(function (cover) {
        cover.addEventListener("click", coverClickHandler);
    });
}());

javascriptcoding5678 · August 25, 2019, 10:25pm

Should this.
https://jsfiddle.net/ehvazmL1/2/
covers.forEach(cover => {

Look like this instead?
https://jsfiddle.net/ehvazmL1/
covers.forEach((cover) => {

Is one way right and the other wrong?

javascriptcoding5678 · August 25, 2019, 10:30pm

jslint is saying to do it this way.
covers.forEach((cover) => {

javascriptcoding5678 · August 26, 2019, 1:21pm

How would this be written if it was using a for loop instead of for…of?

I am trying to figure this out.

I have an example here I think that can be used, but would need to be changed.

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

I’m trying to add this into the for loop code.

    const covers = document.querySelectorAll('.jacket')

    for (let cover of covers) {
        cover.addEventListener('click', function (evt) {
            evt.currentTarget.classList.add('hide')
        })
    }

javascriptcoding5678 · August 27, 2019, 6:57pm

How would I be able to write the code this way?

How it was originally written:

This was done to make the string shorter.

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

All I would be doing is.

Changing this:

The way it’s written like this is over 80 characters long.

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

To this:

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

My attempts

Not working:
https://jsfiddle.net/x38hf1gr/3/

function addCoverListener(cover) {
    cover.addEventListener("click", coverClickHandler);
}
 const covers = ".jacket-left, .jacket-middle, .jacket-right";
covers.querySelectorAll(covers).forEach(addCoverListener);

}());

Not working:
https://jsfiddle.net/x38hf1gr/2/

function addCoverListener(covers) {
    covers.addEventListener("click", coverClickHandler);
}
 const covers = ".jacket-left, .jacket-middle, .jacket-right";
covers.querySelectorAll(covers).forEach(addCoverListener);

}());

javascriptcoding5678 · August 27, 2019, 10:50am

This is for…of
https://jsfiddle.net/7gryfnsh/4/

    const covers = document.querySelectorAll('.jacket')

    for (let cover of covers) {
        cover.addEventListener('click', function (evt) {
            evt.currentTarget.classList.add('hide')
        })
    }

This is forEach
https://jsfiddle.net/o5dkr8hs/2/

    const covers = document.querySelectorAll(".jacket-left, .jacket-middle, .jacket-right");
    covers.forEach(function (cover) {
        cover.addEventListener("click", coverClickHandler);
    });
}());

I have an example of for loop here:

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

I tried to insert the jacket code in there but wasn’t able to figure it out.

    function addCoverListener(cover) {
        const covers = cover.querySelectorAll(".jacket");
        for (let i = 0; i < covers.length; i += 1) {
        cover.addEventListener('click', function (evt)
            hide(covers[i]);
        }
    }

ilenia · August 27, 2019, 10:53am

to access each element in the array you need to use covers[i]

covers is the array, so you access the elements you need to use bracket notation with the index, covers[0] etc

javascriptcoding5678 · August 27, 2019, 10:55am

What would I change in the code for it to be right?

Like this?
covers.addEventListener

Anything else I need to change?
https://jsfiddle.net/fdL3uowv/

    function addCoverListener(cover) {
        const covers = cover.querySelectorAll(".jacket");
        for (let i = 0; i < covers.length; i += 1) {
        covers.addEventListener('click', function (evt)
            hide(covers[i]);
        }
    }

ilenia · August 27, 2019, 10:58am

use covers[i] when you need to reference the single element in the array inside the loop

in forEach you use cover to reference the single element because it is the method that passes the single element to the callback, in the for loop you need to access the single element of the array using bracket notation