Random quote machine: I cannot populate the tweets with quotes

1

Hello,

The machine works, but I cannot populate the new tweets created with the Tweet button in Codepen.

Here is my Codepen; I have not worked a lot in the CSS yet.

What it should do: the Twitter button should contain a link to the random quote machine if the user has not generated a random quote. However, if the user clicks on the New Quote button and then the Tweet button, the tweet should contain the quote, the author and the link to the quote machine.

What it does: the quote machine generates random quotes (correctly), but, after clicking on the tweet button, the tweet contains only a link to the quote machine, not the displayed quote.

The console throws this error:

Uncaught TypeError: Cannot set property ‘href’ of null
at Object.tweet (pen.js:28)
at HTMLButtonElement. (pen.js:36)

Then I entered: document.getElementById("tweet") and the console returns null, which makes sense.

However, when I tested the quote machine locally (in my PC), everything worked as intended. When I entered document.getElementById("tweet") the console returned:
<a id="tweet" href="https://twitter.com/intent/tweet?text=Fake+quotes+machine" class="twitter-share-button" data-size="large" data-show-count="false" target="_blank">Tweet</a>

Why is there an error in Codepen?

Thanks in advance for your help

EDIT: Pardon me, if that matters, when I test the html file locally, I put <script src="random quote machine.js"></script> just before the closing <body> tag.

2

I will answer my own question: I found solution that maybe can help someone.

Here it is the code related to the Twitter share button in my Codepen, that was generated through Publish Twitter:

<a id="tweet" href="" class="twitter-share-button" data-size="large" data-url="" data-show-count="false" target="_blank">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

As you can see, there are 2 HTML tags: </a> and </script>. That second line of code calls the Twitter for Websites JavaScript, included in the fourth step in the tutorial How to add a Tweet button to your website

After commenting out the </script> tag, the random quote machine could populate the tweet with the quote as intended.

So, if you have problems populating the tweet with the quote, try commenting out the </script> tag. However, that will change the styles of the button.