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

usergeyv

Знаток
Регистрация
5 Июл 2013
Сообщения
152
Реакции
25
Как запустить таймер не при загрузки страницы, а по клику на кнопку?(каждый клик, новый запуск, без перезагрузки стран.)
кнопка
HTML:
<button type="button" id="test">Left</button>
таймер
HTML:
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);
 
Обернуть это всё в функцию и повесить обработчик, не?
HTML:
  const tick = () => {
    // Твоя функция
  }

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

  element.addEventListener("click", tick)

Вроде так.
 
Обернуть это всё в функцию и повесить обработчик, не?
HTML:
  const tick = () => {
    // Твоя функция
  }

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

  element.addEventListener("click", tick)

Вроде так.
Uncaught TypeError: Cannot read property 'addEventListener' of null
 
Извиняй, изначально в код не тот id прописал.
Я уже отредактировал, но ты похоже ответ увидел до редактирования :oops:
вот что я сделал
HTML:
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)
та же ошибка
 
HTML:
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()
})

Говнокод, но лучше на ночь глядя не придумаю :dead:
 
Код:
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);
}
 
Назад
Сверху