Почему при клике не запускается анимация?

Question

[Lia Sav]

html

<div class="main_animate">
          <img
            id="wheel_inside"
            src="./img/bg/wheel_inside.png"
            alt="wheel_inside"
          />
          <img
            class="wheel_outside"
            src="./img/bg/wheel_outside.png"
            alt="wheel_outside"
          />
          <button id="btn">крутить</button>
        </div>

css

main .main_animate {
  position: relative;
  padding-top: 106px;
  width: 794px;
  height: 903px;
}
main .main_animate #wheel_inside {
  display: block;
  position: absolute;
  top: 160px;
  left: 70px;
}
main .main_animate .wheel_outside {
  display: block;
  position: absolute;
  bottom: -90px;
  left: 0;
  z-index: 1;
}
main .main_animate button {
  padding: 0;
  position: absolute;
  top: 450px;
  left: 320px;
  z-index: 5;
  font-size: 2.8125rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
main .main_animate #wheel_inside .animate {
  animation-name: rotating;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(430deg);
  }
}

js

window.onload = function () {
        document.getElementById("btn").onclick = function () {
          document
            .getElementById("wheel_inside_animate")
            .classList.add("animate");
        };
      };

Подскажите, пожалуйста, в чем ошибка

Answer 1

[Уктам Хамидов]

Ошибся в получении по id, у тебя нет блока с id=“wheel__inside__animate”. Есть только “wheel__inside”

Comments

[Lia Sav]

Такой код тоже не работает.
window.onload = function () {
document.getElementById("btn").onclick = function () {
document
.getElementById("wheel_inside")
.classList.add("animate");
};
};

[Уктам Хамидов]

На будущее: если код кажется правильным но не работает попробуй вывести в консоль объекты которые получаешь через getElementById/querySelector(или другим способом). То есть:

const element = document.getElementById(“element-id”);
console.log(element)

Или если лень переменную заводить
console.log(document.getElementById(“element-id”);

[Уктам Хамидов]

Lia Sav, попробуй продебажить, не вижу ошибки, должно работать, узнай вызывается ли onclick у #btn, просто добавь туда console.log(123)

Если пашет то попробуй вывести в консоль #wheel__inside, если тоже норм попробуй задать класс animate вручную через инспектор, то есть найди этот элемент в инспекторе в html и дважды кликни поиклассу, появится курсор, допиши туда вручную класс animate, если не работает - значит ошибка в css где то.

[Lia Sav]

const b = document.getElementById("btn");
console.log(b); // получаю нужный элемент

Так нужно проверить или неправильно пишу?
b.onclick = function () {
console.log(123);
}

[Уктам Хамидов]

Lia Sav, да, так

[Lia Sav]

В консоле ничего нет

[Lia Sav]

Ошибка была в том, что был пробел в css
main .main_animate #wheel_inside.animate
Спасибо большое за помощь!