HTML Template not rendering on screen

JavaScript
1

Hello all,

I’m currently building a Twitter clone for my portfolio using Web Component’s template feature. However, my template isn’t rendering on screen when the tweet button is clicked. I’m currently getting an error ’ Uncaught TypeError: Cannot set property ‘innerHTML’ of null at HTMLButtonElement.postTweetButton.onclick '.

I have attempted moving the ‘tweetText.innerHTML = tweetBoxInput;’ line around to no avail. My tweetText variable’s value is correct so I’m not sure why the property cannot set. I suspect it’s to do with the template not importing correctly.

JS FIDDLE: https://jsfiddle.net/manoj1234/mty68qng/13/

Help greatly appreciated. Thanks.

2

Are you sure you should be trying to change text within the template, instead of created node?

3

Thanks so much. I added tweetInstance.querySelectorAll(‘p’)[0].innerHTML = tweetBoxInput; which changes the text of the new node.