javascript - 从 javascript 类内部更改 div 的内容

亲爱的编码伙伴，您好，

我有个问题:

我正在尝试使用我创建的类中的方法的结果更改 div 的内容。不知何故，我一直以空结束。我可能在概念上做错了，但我不知道是什么，因为我对 javascript 很陌生。

到目前为止，这是我的代码:

class Virus {
  constructor(population) {
    this.mortalityPercentage = 0.023;
    this.period = 1;
    this.infectionRate = 2;
    this.infected = 1;
    this.population = population;
  }
  calculate() {
    while (this.infected < this.population) {
      this.period += 6;
      console.log(this.period);
      this.infected *= this.infectionRate;
      console.log(this.infected);
      this.dead = this.infected * this.mortalityPercentage;
      console.log(this.dead);
    }
  }
  render() {
        document.getElementById('days').innerHTML = this.period;
        document.getElementById('infected').innerHTML = this.infected;
        document.getElementById('dead').innerHTML = this.dead;
  }
};

let virus = new Virus(7760000000);
virus.calculate();
virus.render();

How many days does it take to infect the world?
<div id="days">

</div>
Number of infected people:
<div id="infected">

</div>
I see dead people:
<div id="dead">

</div>

这是我在 jsFiddle 上收到的错误消息:
未捕获的类型错误:无法设置 null 的属性“innerHTML”
在 Virus.render ((index):55)
在(索引):63
理想情况下，我想要一个使用 setInterval 或 requestAnimationFrame 的计数器，但我不知道如何使用。你能帮忙吗？

最佳答案

你的 setInterval 可以放在很多地方，但把它放在你的函数调用周围可能最清楚:

setInterval( () => {
  virus.calculate();
  virus.render();
}, 250)

现在计算和渲染方法将每 250ms 执行一次

您可以用 while 替换您的计算中的 if 因为每次调用该函数时都会对其进行评估

calculate() {
  if (this.infected < this.population) {
    this.period += 6;
    this.infected *= this.infectionRate;
    this.dead = this.infected * this.mortalityPercentage;
  }
}

工作示例:https://jsfiddle.net/yodjf14v/3/

或者，您可以将 setInterval 放在 calculate() 函数中并让它调用 render() :

calculate() {
  setInterval( () => {
    if (this.infected < this.population) {
      this.period += 6;
      this.infected *= this.infectionRate;
      this.dead = this.infected * this.mortalityPercentage;
      this.render(); // Here's the render call
    }
  }, 250)
}

为了额外的好处，让 setInterval 中的 250ms 成为你类的属性，比如 this.interval = 250; 。将值放在代码中间被称为 magic number 并且通常被认为是不好的做法。
requestAnimationFrame 可能不适合您的用例，因为您无法直接控制它何时运行(即:每 n 毫秒)。当您想尽可能频繁地重绘时，它通常更用于动画。

您始终可以通过存储上次调用时间并将其与当前时间进行比较来限制其中的函数调用，但对于此用例，它只是带有更多步骤的 setInterval

关于javascript - 从 javascript 类内部更改 div 的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59956319/