Как связать функцию анимации с событием onclick

Question

Необходимо сделать, чтобы в то время как фигура изменяет цвет, при клике, увеличивался счетчик на 1. Но не знаю как связать два этих события

let shape2 = document.getElementById('shape-2')
let shape3 = document.getElementById('shape-3')
let int


window.onload = function changeColorOne() {

  int = setInterval(function(){
  shape1.style.backgroundColor = '#70348C'
  setTimeout(function move() {
     shape1.style.backgroundColor = '#00844B'
  }, 800)
}, 3600)
}


window.onload = function () {
    span = document.getElementById('game__time')
    let count = 0
    span.innerHTML = count

    document.body.onclick = function (e) {
        e = e || event
        let target = e.target || e.srcElement
        if (target.id == 'shape-1') {
            count++
            span.innerHTML = count
        }
    }
}

Answer 1

Ну можно просто проверить if( shape1.style.backgroundColor === '#00844B' ) но с добавлением / удалением класса немного проще жить: Помимо того, что оно просто короче... Если захочется изменить цвет, не придется его вручную менять в нескольких местах скрипта)

А если всё же выбираете вариант установки цвета через строку из скрипта, стоит заранее объявить именованные константы, типа const BOX_COLOR = "#00844B"; и везде в коде ссылаться на константу, а не указывать строку напрямую.

document.addEventListener("DOMContentLoaded", __main__);

function __main__() {
  let shape1 = document.getElementById('shape-1');
  let interval;

  startColorChange();
  setClickCounter();

  function startColorChange() {
    interval = setInterval(function() {
      shape1.classList.add("active");

      setTimeout(function() {
        shape1.classList.remove("active");
      }, 800);
    }, 3600);
  }

  function setClickCounter() {
    let count = 0;
    let span = document.getElementById('game__time');
    span.textContent = count;

    document.addEventListener('click', function(e) {
      let shape = e.target.closest("#shape-1");
      if (!shape) return;

      if (shape.classList.contains("active")) {
        span.textContent = ++count;
      } else {
        console.log("Промах!");
        setTimeout(e => console.clear(), 1000);
      }
    });
  }
}

.box {
  width: 50px;
  height: 50px;
  background-color: orange;
  margin: 4px;
}

.box.active {
  background-color: red;
}

.box.active:active {
  background-color: #a00;
}

<span id="game__time"></span>
<hr>
<div class="box" id="shape-1"></div>

.onload - свойство объекта window, и оно одновременно может хранить только одну функцию. Ваша вторая функция перебивает первую (которая в итоге не выполняется). Если правда необходима загрузка всего, можно завернуть весь код в window.addEventListener("load", function() { /*...*/ }) , но это событие включает и загрузку всех внешних скриптов, картинок и прочего. В большинстве случаев достаточно и загрузки HTML, событие DOMContentLoaded.

БЛОГ НА HUSL

Как связать функцию анимации с событием onclick

Ответы (1 шт):