1

На сайте, в шапке две кнопки, допустим 1 и 2. При нажатии кнопки 2 на странице начинается цикличное обновление, вот код:

// Получим наш элемент
  var li = document.getElementsByTagName('li')[1];

  // Событие, которое происходит при клике на элемент
  li.addEventListener('click', function once(){
      setInterval(function once(){
    li.click();
  }, 5000);
  });

Требуется при нажатии на кнопку 1 остановить обновление, а если снова нажата клавиша 2 его продолжить и по кругу.

Пробовал стопить вот так:

var li = document.getElementsByTagName('li')[0];
// Событие, которое происходит при клике на параграф

function once() {
    li.removeEventListener("click", once);
  }
  li.addEventListener("click", once);

Не работает, помогите все сделать правильно!

3 ответа 3

1

Элементы

var li = document.getElementsByTagName('li')[1];

и

var li = document.getElementsByTagName('li')[0];

разные элементы.


var li_0 = document.getElementsByTagName('li')[0];
var li_1 = document.getElementsByTagName('li')[1];
var timer;
var counter = 0;

li_1.addEventListener('click', function() {
  if (!timer) {
    console.log("starting");
    timer = setInterval(function() {
      // some useful code
      console.clear();
      console.log(++counter);
    }, 1000);
  }
});

li_0.addEventListener('click', function() {
  console.log("stopping");
  timer = clearInterval(timer);
});
<ul>
  <li>Click to Stop</li>
  <li>Click to Start</li>
</ul>

9
  • Да действительно, они разные, каждый к своей кнопке, к сожалению код не работает (
    – Влад
    20 апр 2020 в 14:57
  • @Влад Код работает. Вы неаккуратно скопировали его к себе.
    – user176262
    20 апр 2020 в 14:59
  • Попробовал еще раз, все равно не работает.
    – Влад
    20 апр 2020 в 15:19
  • @Влад Нажмите кнопку "Выполнить код" в ответе.
    – user176262
    20 апр 2020 в 15:20
  • Я вижу это и тут и в хроме, в логе события идут, но данные не обновляются, то есть по таймеру "click" по li_1 не происходит.
    – Влад
    20 апр 2020 в 15:22
0

var li_0 = document.getElementsByTagName('li')[0];
var li_1 = document.getElementsByTagName('li')[1];
var timer;

li_1.addEventListener('click', function(){
  if (!timer) {
    timer = setInterval(function() {
        li_1.click();
    }, 5000);
  }
});

li_0.addEventListener('click', function() {
  timer = clearInterval(timer);
});

Вот так выглядит решение сего вопроса, благодарю за помощь!

3
  • Решение? Это код из моего ответа! Знак "галочка" - слева от ответа.
    – user176262
    20 апр 2020 в 16:47
  • На авторство не претендую)) Но, то что в коде не было команды click(); подозрительно))
    – Влад
    21 апр 2020 в 5:37
  • Ваше решение мне очень помогло, большое спасибо!
    – Влад
    21 апр 2020 в 5:42
0

В продолжении темы собрал еще один скрипт:

var li_1 = document.getElementsByTagName('li')[1];
var li_2 = document.getElementsByClassName('btn grey order')[3];
var timer;

li_1.addEventListener('click', function(){
  if (!timer) {
    timer = setInterval(function() {
        li_1.click();
    }, 10000);
  }
});

li_2.addEventListener('click', function() {
  timer = clearInterval(timer);
});

который запускает таймер по клику на одну кнопку li_1 и должен остановить его на li_2, но остановка не происходит. Что не так и что ему надо?

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.