изменить содержимое div из класса javascript - PullRequest
Новая
       4

изменить содержимое div из класса javascript

3 голосов
/ 28 января 2020

Здравствуйте, дорогие друзья по кодированию,

У меня проблема:

Я пытаюсь изменить содержимое 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: Uncaught TypeError: Невозможно установить свойство 'inner HTML' null в Virus.render ((index): 55) at (index): 63 В идеале я хотел бы, чтобы счетчик использовал setInterval или requestAnimationFrame, но я понятия не имею как. Можете ли вы помочь?

1 Ответ

1 голос
/ 28 января 2020

Ваш setInterval может go в куче мест, но, вероятно, наиболее очевидно поместить его вокруг вызовов вашей функции: 

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

Теперь методы вычисления и рендеринга будут выполняться каждый 250 мс

Вы можете заменить 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)
}

Для дополнительного Боже мой, сделайте 250 мс в вашем setInterval свойством класса you вроде this.interval = 250;. Значение в середине кода известно как маги c число и часто считается плохой практикой.

requestAnimationFrame, вероятно, не подойдет для вашего варианта использования здесь, потому что вы не имеете прямого контроля над его выполнением (ie: каждые n миллисекунд). Обычно он больше используется для анимации, когда вы хотите перерисовывать как можно чаще.

Вы всегда можете регулировать вызовы своих функций в нем, сохраняя время последнего вызова и сравнивая его с текущим временем, но для этого варианта использования это было бы setInterval с большим количеством шагов

...