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

Question

[yumakaev]

Здравствуйте, пытаюсь реализовать кликер на время, но по какой-то причине не он не работает...
Почему не работает таймер, и почему score выводится в консоль, но не перерисовывается в DOM?
https://codesandbox.io/s/festive-sunset-pfmtz

Comments

[Игорь]

Наверное какая-то магия должна произойти что бы "перерисовался" DOOM?

[Игорь]

Вы каждый раз создаёте новую кнопку и тут же её удаляете.

Answer 1

[Пашенька]

Вы вешаете обработчик на кнопку, которую после клика тут же удаляете. Код внутри обработчика будет выполнен только один раз естественно. Чего вы ожидаете? Это вам не реакт и прочая лабуда. Тут нужно работать.

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

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

Comments

[yumakaev]

А как тогда изменить кнопку старта, чтобы после нажатия она делала score++?

[Пашенька]

yumakaev,

import "./styles.css";

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

const newScore = document.createElement("span");
app.insertAdjacentElement("beforeend", newScore);
const newTimeout = document.createElement("span");
app.insertAdjacentElement("beforeend", newTimeout);

let score = 0;
let time = 10;

btnApp.onclick = function() { // чё за мода на эти кастрированные функции () =>
  this.textContent = 'Click';

  newScore.textContent = `Score: ${score}`;

  this.onclick = function() {
    score += 1;
    newScore.textContent = `Score: ${score}`;
    console.log(score);
  }

  newTimeout.textContent = `Time: ${time}`; // я не знаю какую цель вы преследуете. С этим разбирайтесь сами

  timeOut(); // я не знаю какую цель вы преследуете. С этим разбирайтесь сами
}

function timeOut() {
  const timer = setTimeout(() => {
    if (time <= 0) {
      clearTimeout(timer);
    } else {
      time -= 1;
      newTimeout.textContent = `Time: ${time}`; // я не знаю какую цель вы преследуете. С этим разбирайтесь сами
    }
  }, 1000);
}

[yumakaev]

like-a-boss, Почему ссылаясь дважды на одну кнопку, будут выполнятся две разные функции?
Первый onClick - текст меняется на "Click"
Второй onClick - score++
Разве при повторном клике не должен постоянно срабатывать первый onClick?

(Я только учусь извините за возможно глупые вопросы)

[Пашенька]

yumakaev, вопрос правильный для новичка. Я специально использовал onclick вместо изначального addEventListener('click'.. Разницу я объяснял здесь
Так что нет, не будет, здесь обработчик перезаписывается.

[yumakaev]

like-a-boss, Вопрос снят, спасибо за ответы :)