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';
}
...
}
Whenever I call .update in an instance of Verse, the paragraph element's text changes without a problem but trying to change the span's text gives me an error: TypeError: Cannot set properties of null. Does not work with innerText either. It works fine if I change it outside of the class. Thanks for the help!
Setting innerHTML on #text replaces the contents of the <p> entirely, so when you subsequently try to access #reference it no longer exists.
The simplest way to avoid this would be to add another span and replace its text instead of the entire <p>.
<div id='verse'>
<p>
<span id='reference'>random stuff here</span>
<span id='text'>random stuff here</span>
</p>
</div>