Как получить доступ к нескольким элементам div (элементам уровня блока) из javascript, чтобы изменить свойство transform всех элементов?

Question

Согласно этому фрагменту, я хочу, чтобы все коробки вращались на 180 градусов. Я могу сделать это, применяя разные имена ID. Но я хочу, чтобы без применения разных идентификаторов я хотел вращать поля одним щелчком мыши:

function home() {
  var change = document.getElementById("boxes");
  change.style.background = "rgba(55, 111, 172, 0.408)";
  change.style.webkitTransform = "rotateZ(180deg)";
}

.wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.box1 {
  background: rgba(111, 154, 201, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.box2 {
  background: rgba(90, 134, 180, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

<div class="wrap">
  <div id="boxes" class="box1"></div>
  <div id="boxes" class="box2"></div>
  <div id="boxes" class="box1"></div>
  <div id="boxes" class="box2"></div>
  <div id="boxes" class="box1"></div>
  <div id="boxes" class="box2"></div>
  <div id="boxes" class="box1"></div>
  <div id="boxes" class="box2"></div>
</div>
<button id="btn" onclick="home()">submit</button>

Answer 1

ids уникальны, вы не можете иметь более 2 элементов с одинаковым id. Вместо этого вы можете получить все div внутри класса .wrap, используя querySelectorAll или выбрав div с именами классов.

function home() {
  // document.querySelectorAll(".box2, .box1") -> with same class name
  document.querySelectorAll(".wrap > div")
    .forEach(box => {
      box.style.background = "rgba(55, 111, 172, 0.408)";
      box.style.webkitTransform = "rotateZ(180deg)";
    });
}

.wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.box1 {
  background: rgba(111, 154, 201, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.box2 {
  background: rgba(90, 134, 180, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

<div class="wrap">
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
</div>
<button id="btn" onclick="home()">submit</button>

- Правка -

Чтобы фоновый цвет boxes был начальным, после завершения анимации , добавьте transitionend событие, которое запускается после завершения перехода, и измените цвет фона на исходный.

document.querySelector('#btn')
  .addEventListener('click', function() {
    document.querySelectorAll(".wrap > div")
      .forEach(box => {
        box.addEventListener('transitionend', function() {
          this.style.background = this.classList.contains('box1') ? "rgba(111, 154, 201, 0.808)" : "rgba(90, 134, 180, 0.808)";
        });

        box.style.background = "rgba(55, 111, 172, 0.408)";
        box.style.transform = "rotateZ(180deg)";
      });
  });

.wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.box1 {
  background: rgba(111, 154, 201, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.box2 {
  background: rgba(90, 134, 180, 0.808);
  width: 50px;
  height: 50px;
  margin: 2px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

<div class="wrap">
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box1"></div>
</div>
<button id="btn">submit</button>

Answer 2

Вы можете дать класс "ящики" для всех ваших ящиков. Затем вы можете использовать это для запроса всех элементов

var elementsArray = document.getElementsByClassName("boxes");

Затем используйте a для l oop, чтобы изменить их стиль.

for (var i = 0; elementsArray.length; i++) {
   elementsArray[i].style.background = "rgba(55, 111, 172, 0.408)";
   elementsArray[i].style.webkitTransform = "rotateZ(180deg)";
}