getElementById не работает в методе класса

#javascript #html

Вопрос:

HTML:

 <div id='verse'>
    <p id='text'>
        <span id = 'reference'>random stuff here</span> 
     random stuff here
     </p>
  </div>
 

JS:

 class Verse {
  ...
  update() {
    document.getElementById('text').innerHTML = 'text';
    document.getElementById('reference').innerHTML = 'reference';
  }
  ...
}
 

Всякий раз , когда я вызываю .update экземпляр Verse , текст элемента абзаца изменяется без проблем, но попытка изменить текст промежутка приводит к ошибке: TypeError: Cannot set properties of null . Также не работает с внутренним текстом. Это прекрасно работает, если я изменю его вне класса. Спасибо за помощь!

Ответ №1:

Параметр innerHTML вкл #text <p> полностью заменяет содержимое файла, поэтому при последующей попытке доступа #reference к нему он больше не существует.

Самый простой способ избежать этого-добавить еще один интервал и заменить его текстом вместо всего <p> .

 <div id='verse'>
  <p>
    <span id='reference'>random stuff here</span> 
    <span id='text'>random stuff here</span>
  </p>
</div>
 

Комментарии:

1. Есть ли какой-нибудь способ обойти это?