Javascript error "Cannot set property 'innerHTML' of null"

Highlighted

Hello,

I have this code to change a text on my product page when the variant is changed based on the selected variant(using metafields)

It works fine when there is a text, but when there isn't one, I get an error and every related function after also doesn't work

document.getElementById('my-id').textContent = data[ variant.id ];
// or
document.getElementById('my-id').innerHTML = data[ variant.id ];

// My if statement also doesn't help
if (data[ variant.id ] != null){
document.getElementById('my-id').textContent = data[ variant.id ];}

I have a couple of these, and if the first one doesn't work, it won't try the next ones. I'm probably missing something very obvious but I'm new to js.

Before I used jQuery to get this work

$(this.selectors.myVar).html(data[ variant.id ]);

Thanks for your help

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted

Update here, it's working now

if (getElementByID('my-id'))
instead of
if (data[ variant.id ] != null)

can anyone confirm if there is a problem here? it's working how it's supposed to right now 

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes