<div class="wrapper">
  <div class="box"></div>
  <div class="btn-wrapper">
    <button class="btn1">salmon</button>
    <button class="btn2">seagreen</button>
    <button class="btn3">lightblue</button>
  </div>
.wrapper {
  width: 300px;
  margin: 0 auto;
}

.box {
  width: 300px;
  height: 300px;
  background-color: salmon;
}

.btn-wrapper {
  display: flex;
  justify-content: space-between;
}

button {
  margin-top: 20px;
  padding: 8px;
  border: none;
  background-color: white;
  cursor: pointer;
}

.btn1 {
  border: 3px solid salmon;
}

.btn2 {
  border: 3px solid seagreen;
}

.btn3 {
  border: 3px solid lightblue;
}

.salmon {
  background-color: salmon;
}

.seagreen {
  background-color: seagreen;
}

.lightblue {
  background-color: lightblue;
}

const box = document.querySelector(".box");
const salmon = document.querySelector(".btn1");
const seagreen = document.querySelector(".btn2");
const lightblue = document.querySelector(".btn3");

const btnArr = [salmon, seagreen, lightblue];

btnArr.forEach((element) => {
  element.addEventListener("click", () => {
    box.classList.remove[("salmon", "seagreen", "lightblue")];
    if (element.className == "btn1") {
      box.classList.add("salmon");
      box.classList.remove("seagreen", "lightblue");
    } else if (element.className === "btn2") {
      box.classList.add("seagreen");
      box.classList.remove("salmon", "lightblue");
    } else {
      box.classList.add("lightblue");
      box.classList.remove("salmon", "seagreen");
    }
  });
});

// 간략화시키기 전 코드
// salmon.addEventListener("click", function () {
//   box.classList.add("salmon")
//   box.classList.remove("seagreen", "lightblue")
// })

// seagreen.addEventListener("click", function () {
//   box.classList.add("seagreen")
//   box.classList.remove("salmon", "lightblue")
// })

// lightblue.addEventListener("click", function () {
//   box.classList.add("lightblue")
//   box.classList.remove("salmon", "seagreen")
// })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.