Question 293307 in Html Question posted in
Some basic documentation can be found here.

Html – How to add and remove background color of multiple boxes on click event

When I am clicking a box, background of page should change to the color of box (that is happening), but what I want is whichever box I clicked last , that box color should also change.
I am also achieving to add color to box that I clicked but when I clicked the next box the color on previous box is not removing. I want only one box(last clicked) to have color.

let h2 = document.querySelector("h2");
let p = document.querySelector("p");
let boxes = document.querySelectorAll(".box");
let body = document.body;

boxes.forEach((box) => {
  box.addEventListener("click", (e) => {
    let bgColor = e.target.id;
    body.style.backgroundColor = bgColor;

    if (e.target.id === "white" || e.target.id === "yellow") {
      h2.style.color = "black";
      p.style.color = "black";
    } else {
      h2.style.color = "white";
      p.style.color = "white";
    }

    // if(e.currentTarget.id === bgColor){
    //   box.style.backgroundColor = "#343434";
    // }else {
    //   box.style.backgroundColor = bgColor;
    // }
  }, false)
})
#main {
  width: 40%;
  text-align: center;
}

#boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-block: 1.4rem;
  cursor: pointer;
}

.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
}

#boxes #grey {
  background-color: grey;
}

#white {
  background-color: white;
}

#blue {
  background-color: blue;
}

#yellow {
  background-color: yellow;
}
<div id="main">
  <h2>Color Switcher</h2>
  <div id="boxes">
    <div class="box" id="grey"></div>
    <div class="box" id="white"></div>
    <div class="box" id="blue"></div>
    <div class="box" id="yellow"></div>
  </div>
  <p>Click the boxes to change the background color of the page as box color</p>
</div>
Tags:

2

Answers


  1. 0 
    let h2 = document.querySelector("h2");
let p = document.querySelector("p");
let boxes = document.querySelectorAll(".box");
let body = document.body;
let lastClickedBox = null;

boxes.forEach((box) => {
box.addEventListener("click", (e) => {
  // Remove color from the last clicked box
if (lastClickedBox) {
  lastClickedBox.style.backgroundColor = "";
}

let bgColor = e.target.id;
body.style.backgroundColor = bgColor;

// Set the color for h2 and p based on the clicked box color
if (bgColor === "white" || bgColor === "yellow") {
  h2.style.color = "black";
  p.style.color = "black";
} else {
  h2.style.color = "white";
  p.style.color = "white";
}

// Set background color for the clicked box
e.target.style.backgroundColor = "#343434";

// Update the last clicked box
lastClickedBox = e.target;
}, false);
});

    Now check if this works

    Login or Signup to reply.
  2. 0

    You can accomplish this by iterating over the rest of the boxes each time the active box changes, and adjusting their background colors accordingly.

    This example sets the active box to gray and the rest of the boxes to match the background

    let h2 = document.querySelector("h2");
let p = document.querySelector("p");
let boxes = document.querySelectorAll(".box");
let body = document.body;

boxes.forEach((box) => {
  box.addEventListener("click", (e) => {
    let bgColor = e.target.id;
    body.style.backgroundColor = bgColor;

    if (e.target.id === "white" || e.target.id === "yellow") {
      h2.style.color = "black";
      p.style.color = "black";
    } else {
      h2.style.color = "white";
      p.style.color = "white";
    }

    boxes.forEach((box2) => {
      if (e.currentTarget.id == box2.id) {
        box2.style.backgroundColor = "#343434";
      } else {
        box2.style.backgroundColor = bgColor;
      }
    })
  }, false)
})
    #main {
  width: 40%;
  text-align: center;
}

#boxes {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-block: 1.4rem;
  cursor: pointer;
}

.box {
  height: 100px;
  width: 100px;
  border: 2px solid black;
}

#boxes #grey {
  background-color: grey;
}

#white {
  background-color: white;
}

#blue {
  background-color: blue;
}

#yellow {
  background-color: yellow;
}
    <div id="main">
  <h2>Color Switcher</h2>
  <div id="boxes">
    <div class="box" id="grey"></div>
    <div class="box" id="white"></div>
    <div class="box" id="blue"></div>
    <div class="box" id="yellow"></div>
  </div>
  <p>Click the boxes to change the background color of the page as box color</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search