set active element background red and set the remaining elements to white backgrounnd using vanilla-CodePudding

I have a simple section that contains five elements on default the first element background is red (active element) now I want when u click any of the remaining elements to change the background color to red, and the remaining elements to have white background color using vanilla js.

Problem: When I click any of the remaining elements is set to red but the previous active element is still red; live demo

My solution

HTML

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>

CSS

#panels{ display: flex; justify: space-between; align-items: center }

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

 var panel = document.getElementById('panels'); // Parent

        panel.addEventListener('click', function (e) {
            var target = e.target; // Clicked element
            while (target && target.parentNode !== panel) {
                target = target.parentNode; // If the clicked element isn't a direct child
                if (!target) { return; } // If element doesn't exist
            }
            if (target.tagName === 'DIV') {
                target.classList.toggle('active');

            } else {
                console.log('love')

            }
        });

What do I need to change here to get this working?

CodePudding user response：

var panels = document.querySelectorAll("#panels > .panel")
panels.forEach(each=>{
    each.onclick = function(){
        panels.forEach(ss=>ss.classList.remove("active")) // removing active from all
        each.classList.add("active") // assigning active to selected
    }
})

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>

CodePudding user response：

Just for fun and educational purposes, here's a solution with no JavaScript. Just hidden HTML radio buttons and a CSS trick.

#panels {
  display: flex;
  justify: space-between;
  align-items: center
}

.panel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: white;
  color: black;
  font-size: 24px;
  text-align: center;
  margin: 0px auto;
  cursor: pointer;
}

[type=radio]:checked   .panel {
  background: red;
}

[type=radio] {
  display: none;
}

<div id="panels">
  <input type="radio" name="panel" id="panel1" checked />
  <label class="panel" for="panel1">First</label>

  <input type="radio" name="panel" id="panel2" />
  <label class="panel" for="panel2">second</label>

  <input type="radio" name="panel" id="panel3" />
  <label class="panel" for="panel3">third</label>

  <input type="radio" name="panel" id="panel4" />
  <label class="panel" for="panel4">fouth</label>

  <input type="radio" name="panel" id="panel5" />
  <label class="panel" for="panel5">Fith</label>
</div>

CodePudding user response：

const Elements = document.querySelectorAll(".panel");

Elements.forEach((el) => {
  el.onclick = () => {
    if (el.classList.contains("active")) {
      // if you want to remove the red
      el.classList.remove("active");
    } else {
      let CurrentActive = document.querySelector(".active");
      CurrentActive ?CurrentActive.classList.remove("active") :""
      el.classList.add("active");
    }
  };
});

.panel{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 100px;
    background: white;
    color: black;
    font-size: 24px;
    text-align: center;
    margin: 0px auto;
    cursor: pointer;
}
.active{
  background: red;
}

<div id="panels">
  <div class="panel active">First</div>
  <div class="panel">second</div> 
  <div class="panel">third</div>  
  <div class="panel">fouth</div>  
  <div class="panel">Fith</div>
</div>