如何计算特定元素的文本更改？

Question

我在编写代码时遇到问题。

我有一个函数，每隔几秒就会改变元素的文本。

如何在不更改生成器的功能代码的情况下计算该特定元素的更改？

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

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

Answer 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>

Answer 2

我不知道为什么你不能改变generator功能。但你可以做一些generator功能内部的变化很容易实现你的目标。

1. 对于每个计数存储，您需要在相应元素中使用qazxsw poi属性

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');