Cannot read property 'innerHTML' of null [дубликат]

283

03 ноября 2017, 12:39

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

class Game {
  constructor(name){
      this.name = name;
  }
  initialization(){
  ....
  this.Timer();
  }
  TimerDiv(){
      let hour = 0;
      let minute = 0;
      let second = 0;
      if (hour < 10) hour = "0" + hour;
      if (minute < 10) minute  = "0" + minute;
      if (second < 10) second  = "0" + second;
      this.head.querySelector('span').innerHTML = hour + ":" + minute + ":" + second;
      second = +second + 1;
      setTimeout(this.TimerDiv, 1000);
  }
}

Надо реализовать метод-таймер на в процессе выкидывает ошибку "Cannot read property 'innerHTML' of null"

Answer 1

Ваша проблема заключается в убогости JavaScript как такового. Я не говорю, что на нём нельзя писать, я говорю, что на нём писать надо иначе. Вот пример вашей проблемы:

class TestTimer { 
   
  constructor() { 
    this.a = 5 
  } 
   
  _func_() { 
    console.log(this.a) 
  } 
   
  startTimer() { 
    setTimeout(this._func_, 100) 
  } 
   
} 
 
const TimerInstance = new TestTimer() 
TimerInstance._func_() 
TimerInstance.startTimer()

В данном примере отчётливо виден тот факт, что при использовании setTimeout в данном случае у _func_ теряется this. Если вы проверите на console.log(this) внутри _func_, по получите Window

Решение проблемы простое: стрелочные функции, которые получают this извне:

class TestTimer { 
   
  constructor() { 
    this.a = 5 
  } 
   
  _func_() { 
    console.log(this.a) 
  } 
   
  startTimer() { 
    setTimeout(() => { 
      this._func_() 
    }, 100) 
  } 
   
} 
 
const TimerInstance = new TestTimer() 
TimerInstance._func_() 
TimerInstance.startTimer()