Click on second box within div the first box should regain its style and so...on. How could I do it-CodePudding

3 div within container each div contain 3 boxes, total 9 boxes. I use event delegation and apply addeventlistener with forEach loop on every parent box and which changes the color and bg-color of the box. But I want on clicking other box i.e first one regains its original style every time means only the box can borrow the changed style once.

const box = document.querySelectorAll('.box');
box.forEach((boxes)=>{
  boxes.addEventListener("click",(e)=>{
    e.target.style.background="green";
    e.target.style.color="white";
  })
})

<div >
  <div >
    <div >1</div>
    <div >4</div>
    <div >7</div>
  </div>
  <div >
    <div >2</div>
    <div >5</div>
    <div >8</div>
  </div>
  <div > 
    <div >3</div>
    <div >6</div>
    <div >9</div>
  </div>
</div>

CodePudding user response：

Simply reset all values as the first operation any time something is clicked. For example:

const box = document.querySelectorAll('.box');
box.forEach((boxes)=>{
  boxes.addEventListener("click",(e)=>{
    // reset all styles
    document.querySelectorAll('.box1').forEach(b => {
      b.style.background="unset";
      b.style.color="unset";
    });

    // set new style
    e.target.style.background="green";
    e.target.style.color="white";
  })
})

<div >
  <div >
    <div >1</div>
    <div >4</div>
    <div >7</div>
  </div>
  <div >
    <div >2</div>
    <div >5</div>
    <div >8</div>
  </div>
  <div > 
    <div >3</div>
    <div >6</div>
    <div >9</div>
  </div>
</div>

CodePudding user response：

You can use a class then test for that class to remove it before applying the new style as below.

const boxes = document.querySelectorAll('.box1');
boxes.forEach((box) => {
  box.addEventListener("click", (e) => {
    const clickedElement = document.querySelector('.clicked');
    if(clickedElement) {
      clickedElement.classList.remove('clicked');
    }
    e.target.classList.add('clicked');
  })
})

.clicked {
  background-color: green;
  color: white;
}

<div >
  <div >
    <div >1</div>
    <div >4</div>
    <div >7</div>
  </div>
  <div >
    <div >2</div>
    <div >5</div>
    <div >8</div>
  </div>
  <div >
    <div >3</div>
    <div >6</div>
    <div >9</div>
  </div>
</div>

CodePudding user response：

This is my solution, I am using the CSS class to simplify the code:

const box = document.querySelectorAll('.box');
box.forEach((boxes) => {

  boxes.addEventListener("click", (e) => {
    let itemList = document.querySelectorAll('.box1');
    itemList.forEach(item => {
      item.classList.remove("selected");
    })

    let target = e.target;
    target.classList.add("selected");

  })
})

.selected {
  background: green;
  color: white;
}

<div >
  <div >
    <div >1</div>
    <div >4</div>
    <div >7</div>
  </div>
  <div >
    <div >2</div>
    <div >5</div>
    <div >8</div>
  </div>
  <div > 
    <div >3</div>
    <div >6</div>
    <div >9</div>
  </div>
</div>