Запуск таймера по клику на кнопку?

[usergeyv]

Как запустить таймер не при загрузки страницы, а по клику на кнопку?(каждый клик, новый запуск, без перезагрузки стран.)
кнопка

<button type="button" id="test">Left</button>

таймер

var timeout = 15;
var timer = setInterval(function(){
    timeout--;
    document.querySelector('#timer').innerHTML = timeout;
    if( timeout == 0 ){
        clearInterval(timer);
        document.querySelector('#timer').style.display = 'none';
        document.querySelector('#result').style.display = 'block';
    }
},1000);

 

[Sorcus]

Обернуть это всё в функцию и повесить обработчик, не?

  const tick = () => {
    // Твоя функция
  }

  const element = document.querySelector("#test")

  element.addEventListener("click", tick)

Вроде так.

 

[usergeyv]

Обернуть это всё в функцию и повесить обработчик, не?

  const tick = () => {
    // Твоя функция
  }

  const element = document.querySelector("#test")

  element.addEventListener("click", tick)

Вроде так.

Uncaught TypeError: Cannot read property 'addEventListener' of null

 

[Sorcus]

Uncaught TypeError: Cannot read property 'addEventListener' of null

Извиняй, изначально в код не тот id прописал.
Я уже отредактировал, но ты похоже ответ увидел до редактирования

 

[usergeyv]

Извиняй, изначально в код не тот id прописал.
Я уже отредактировал, но ты похоже ответ увидел до редактирования

вот что я сделал

const tick = () => {
var timeout = 15;
var timer = setInterval(function(){
    timeout--;
    document.querySelector('#timer').innerHTML = timeout;
    if( timeout == 0 ){
        clearInterval(timer);
        document.querySelector('#timer').style.display = 'none';
        document.querySelector('#result').style.display = 'block';
    }
},1000);
}

  const element = document.querySelector("#test")

  element.addEventListener("click", tick)

та же ошибка

 

[Sorcus]

const result = document.querySelector("#result")
const button = document.querySelector("#tick")
let last_tick = 0
let timeout = 5
const tick = () => {
  const ticked = setInterval(() => {
    timeout--
    result.innerHTML = timeout
    if (timeout === 0 || last_tick > 1) {
      clearInterval(ticked)
      last_tick -= 1
      timeout = 5
    }
  }, 500)
}

button.addEventListener("click", () => {
  last_tick += 1
  tick()
})

Говнокод, но лучше на ночь глядя не придумаю

 

[kacpar89]

document.onclick = function (){
var timeout = 15;
var timer = setInterval(function(){
    timeout--;
    document.querySelector('#test').innerHTML = timeout;
    if( timeout == 0 ){
        clearInterval(timer);
        document.querySelector('#test').innerHTML = 'Выкл.';
    }
},1000);
}