@yumakaev

Почему не работает кликер на время?

Здравствуйте, пытаюсь реализовать кликер на время, но по какой-то причине не он не работает...
Почему не работает таймер, и почему score выводится в консоль, но не перерисовывается в DOM?
https://codesandbox.io/s/festive-sunset-pfmtz
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
like-a-boss
@like-a-boss
признайся, тебя тянет на код мужика
Вы вешаете обработчик на кнопку, которую после клика тут же удаляете. Код внутри обработчика будет выполнен только один раз естественно. Чего вы ожидаете? Это вам не реакт и прочая лабуда. Тут нужно работать.

import "./styles.css";

const btnApp = document.querySelector("button");
const app = document.querySelector("#app");

let score = 0;
let time = 10;

btnApp.addEventListener("click", () => {
  console.log('hello, you see it only once!') // hello, you see it only once!
  btnApp.remove();

  // Create button Click
  const newBtn = document.createElement("button");
  app.insertAdjacentElement("beforeend", newBtn);
  newBtn.textContent = "Click";

  // Create score
  const newScore = document.createElement("span");
  app.insertAdjacentElement("beforeend", newScore);
  console.log('this will happen only once too!') // this will happen only once too!
  newScore.textContent = `Score: ${score}`;


  // Score++
  newBtn.addEventListener("click", () => {
    score += 1;
    newScore.textContent = `Score: ${score}`; // I added this
    console.log(score);
  });

  // Create timer
  const newTimeout = document.createElement("span");
  app.insertAdjacentElement("beforeend", newTimeout);
  console.log('this will happen only once tooooo!') // this will happen only once tooooo!
  newTimeout.textContent = `Time: ${time}`;

  timeOut();
});

function timeOut() {
  const timer = setTimeout(() => {
    if (time <= 0) {
      clearTimeout(timer);
    } else {
      time -= 1;
    }
  }, 1000);
}


П.С. удалять кнопку и вместо неё создавать новую - это жёстко.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
NewTech Екатеринбург
от 70 000 до 120 000 руб.
GFX Пермь
от 60 000 руб.
10 дек. 2019, в 12:03
2000 руб./за проект
10 дек. 2019, в 11:55
5000 руб./за проект
10 дек. 2019, в 10:56
85000 руб./за проект