How to stop .className when click anywhere on the screen

Question

I have a function that makes an element from a list of elements change its .className when clicked, so lets say when I click the element becomes one color and the others another color. This function is the following:

const memberB = document.querySelectorAll('#memberBoxAlex, 
#memberBoxLiv, #memberBoxFlo');
for (let i = 0; i < memberB.length; i++) 
memberB[i].onclick = function(){
memberBoxAlex.className = "faded";
memberBoxLiv.className = "faded";
memberBoxFlo.className = "faded";

if(memberB[i].className=="open"){
    memberB[i].className="";
}
else{
    memberB[i].className="open";
}

This works perfectly, but what I want to happen next, is when I click outside its box to stop the all the effects so to make all memberB "normal" let's say, so to have .className="" . I've tried to give to their container this function:

let exitEffect = document.getElementById(team)
exitEffect.onclick = function(){
memberBoxAlex.className = "";
memberBoxLiv.className = "";
memberBoxFlo.className = "";}

How can I do so when I click outside the box of the member all className for memberB will "stop" or become .className="" .

Answer 1

use a single class for this for a more generic selector and I use this snippet to use a single event listener for this.

window.addEvent = (event_type, target, callback) => {
  document.addEventListener(event_type, function (event) {
    // If the event doesn't have a target
    // Or the target doesn't look like a DOM element (no matches method
    // Bail from the listener
    if (event.target && typeof (event.target.matches) === 'function') {
      if (!event.target.matches(target)) {
        // If the element triggering the event is contained in the selector
        // Copy the event and trigger it on the right target (keep original in case)
        if (event.target.closest(target)) {
          const new_event = new CustomEvent(event.type, event);
          new_event.data = { originalTarget: event.target };
          event.target.closest(target).dispatchEvent(new_event);
        }
      } else {
        callback(event);
      }
    }
  });
};

and then

window.addEvent('click', '.openable-member', (event) => {
  document.querySelectorAll('.openable-member').each((element) => {
    if (element !== event.target) {
      element.classList.add('faded');
      element.classList.remove('open'); // guessing you'll need this too
    }
  });

  event.target.classList.toggle('open');
});

Answer 2

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

So you can map through memberB because it's not an array. What you can do is:

 const memberB = document.querySelectorAll('#memberA,#memberAA, #memberAAA '); memberB.onclick = function(){ memberB.className = "faded"; if(memberB.className == "open"){ memberB.className = ""; } else{ memberB.className = "open"; } }

Answer 3

你可以试试这个：

memberB[i].className = memberB[i].className.replace("open", "");