Вы вешаете обработчик на кнопку, которую после клика тут же удаляете. Код внутри обработчика будет выполнен только один раз естественно. Чего вы ожидаете? Это вам не реакт и прочая лабуда. Тут нужно работать.
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);
}
П.С. удалять кнопку и вместо неё создавать новую - это жёстко.
