Converting to for loop

JavaScript
1

This is for…of

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

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

This is forEach

    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.
I got it partially working, but the covers aren’t being hidden for some reason.

What would need to be changed in the code?
https://jsfiddle.net/b5qe0fvs/1/

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

2

Where in your code do you actually call this function? Your manageCover function doesnt actually do anything. It creates a series of local functions and then… does nothing with them.

3

I’m trying to fix this function in it.
I did something wrong here.

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

Well how do you know it’s not working, if the function never gets called?

You’ve just said “My car’s radio doesn’t work. I haven’t turned the car on yet, but it doesn’t work.”

1 Like
5

Though for the record, here’s what you did wrong.

One of these things is not like the other. But you’d know that when the function throws an error into the error console when it’s called.

6

The red one should be covers?

7

The answer to that question depends on how you call the function, so I cannot answer your question until you fix the first problem, THEN you can work on the second.

1 Like
8

The function is cover.
function addCoverListener(cover) {

9

That’s not how you’re calling the function, that’s how you’re defining the function.

You’ve told your chef HOW to make a cheesecake.
You have not told your chef to actually MAKE the cheesecake, nor given them the ingredients.
Your chef has not made any cheesecake.

You are asking me why the chef’s cheesecake is made with cream.

1 Like
10

Should this line be here instead.
cover.addEventListener('click', function (evt)

Instead of this line?
cover.addEventListener("click", coverClickHandler );

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

Okay, I give up.

Have fun, i’ll go talk to a wall, as it will listen better.

1 Like
20

Look here the error is gone.

How do I get the covers to stay hidden?

(function manageCover() {
    "use strict";

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

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

http://www.sitepoint.com/community/uploads/short-url/5UiWAMtZPxhyoLNw84hzccSUNwA.png

21

I need to be calling this but don’t understand how it would be done.
addCoverListener

It would be called outside of the function.

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

@m_hutley

I still can’t figure out how to do this.

I need help getting past this step.

I tried here

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

And tried here

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

Another Update****

The covers remain hidden when it is written like this.
Meaning, after they are clicked.

I’m stuck on trying figure out where this right bracket should go.

Wherever I place it the cover then no-longer remains hidden after it is clicked.

function addCoverListener(covers) {}

function addCoverListener(covers) {

}

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

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