Combining 3 functions into a single function

Combining 3 functions into a single function
0

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);
}());

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.

1 Like

You can select multiple classes with querySelectorAll:

(function manageCover() {
  "use strict";

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

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

How would it be written without the arrow function?

What would be used instead of this?
=>

A normal anon function

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

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')
  })
}

It is just the normal function syntax. Your latest code is still using arrow function syntax.

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')
  })
}

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')

1 Like

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')
        })
    }

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);
  });

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);
  });

Why don’t you try to do it yourself first? You should already know how to write functions using normal function syntax.

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);
}());

forEach takes a callback function. You are not defining a function in the forEach.

When all else fails, read the documentation. You will find an example of normal function syntax there.

Not sure how you are using Promises in your code, but you do not understand how to write functions without arrow function syntax. I suggest going through our Basic JavaScript course instead of trying to piece together code you found in other locations.

1 Like

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);
    });
}());
1 Like

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?

It does not make any difference in the way it works when there is only one parameter. If more than one, you must surround with ( and ). Some people like to always use the ( ). I say just be consistent. Either always use the ( and ) around one parameter or don’t do it at all.

1 Like

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

jslint is just one of many linters and all linters can be configured to your own needs and wishes. If you want to force using the ( and ) around a single parameter, then use jslint with the current configuration you are using. If not, then don’t use jslint or change the configuration of it. The choice is yours.

1 Like