Simple question I can't find the answer to

JavaScript
1

A Pen by Trenton (codepen.io)

I wrote up some simple code to make it easy to explain.

so, I just have some divs that have a click event that toggles a class to add a border onto the div.

I’m just trying to figure out how to only be able to have one selected at a time. I only want to be able to have one div selected with a border at a time. I don’t really know how to approach this.

2

Simply put, you need to to remove the class from all the other divs when you add it to the clicked one.

3

Yeah, I’m just having a hard time figuring out how to remove it from the others without affecting the one that is currently being clicked.

e.target and div both work on the current target.

4

Can you share some of your attempts?

5 
containerDivArray.forEach(div => {
    div.addEventListener('click', (e) => {
        e.currentTarget.classList.toggle('border-on-click')  
        if (div !== e.currentTarget) {
            containerDivArray.forEach((item) => {
                item.classList.remove('border-on-click')
            })
        }
    })
});

this is the farthest I’ve gotten but nothing has worked.

6

You’re on the right track! I think your inner loop is in the wrong place. You probably need to loop over every element any time one is clicked.

7

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