Как подсчитать изменения в тексте для определенного элемента?

#javascript

Вопрос:

У меня проблема с написанием кода.

У меня есть функция, которая изменяет текст элемента каждые несколько секунд.

Как мне подсчитать изменения для этого конкретного элемента без изменения кода функции для генератора?

 function generator() {
  number = Math.floor(Math.random() * 11);
  setTimeout(function() {
    setTimeout(function() {
      document.getElementById("demo").innerHTML = number;
      generator();
    }, 2000);
  })
}
generator();

 <p id="demo"></p>

Ответ №1:

Вы могли бы создать другую функцию и установить ее интервал в 1 мс. Затем проверьте innerHTML , не совпадает ли предыдущее innerHTML значение с текущим, а затем увеличьте количество.

 function generator() {
  number = Math.floor(Math.random() * 11);
  setTimeout(function() {
    setTimeout(function() {
      document.getElementById("demo").innerHTML = number;
      generator();
    }, 2000);
  })
}
generator();
let count = 0;
let elm = document.getElementById("demo");
let lastval = elm.innerHTML;
setInterval(() => {
  if(elm.innerHTML !== lastval){
    count  ;
    lastval = elm.innerHTML
    console.log(count)
  }

},1)

 <p id="demo"></p>

Ответ №2:

Я не знаю, почему вы не можете изменить generator функцию.Но вы могли бы внести некоторые изменения внутри generator функции, чтобы легко достичь своей цели.

Для каждого хранения количества вам нужен data-count атрибут в уважаемом элементе

 function generator(id) {
  var el = document.getElementById(id);
  number = Math.floor(Math.random() * 11);
  if(parseFloat(el.innerHTML) == number){ // if previous and current number is matching.its regenerate the number
    generator(id);
  }else{
    setTimeout(function() {
    el.setAttribute('data-count',parseFloat(el.getAttribute('data-count')) 1) //storing the increment value
      el.innerHTML = el.getAttribute('data-count') ':' number;
      generator(id);
    }, 2000);
  }
}
generator('demo');
generator('demo1');

 <p id="demo" data-count=0></p>
<p id="demo1" data-count=0></p>