@lia19
Начинающий

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

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");
        };
      };


Подскажите, пожалуйста, в чем ошибка
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
@thereal_kh
Более менее опытный фронт-энд разработчик.
Ошибся в получении по id, у тебя нет блока с id=“wheel__inside__animate”. Есть только “wheel__inside”
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы