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

Тема в разделе "JavaScript", создана пользователем usergeyv, 31 авг 2018.

  1. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    21
    Как запустить таймер не при загрузки страницы, а по клику на кнопку?(каждый клик, новый запуск, без перезагрузки стран.)
    кнопка
    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);
    
     
  2. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    435
    Симпатии:
    790
    Обернуть это всё в функцию и повесить обработчик, не?
    HTML:
    
      const tick = () => {
        // Твоя функция
      }
    
      const element = document.querySelector("#test")
    
      element.addEventListener("click", tick)
    
    Вроде так.
     
  3. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    21
    Uncaught TypeError: Cannot read property 'addEventListener' of null
     
  4. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    435
    Симпатии:
    790
    Извиняй, изначально в код не тот id прописал.
    Я уже отредактировал, но ты похоже ответ увидел до редактирования :oops:
     
  5. usergeyv

    usergeyv Постоялец

    Регистр.:
    5 июл 2013
    Сообщения:
    131
    Симпатии:
    21
    вот что я сделал
    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)
    та же ошибка
     
  6. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    435
    Симпатии:
    790
    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:
     
    usergeyv нравится это.