Random Quote Generator Challenge. Why does Twitter Widget script stop working?

[BiT4000]

Hi, guys! I’m stuck with the “Tweet” button. I use this functionality for it: Twitter Publish. But for some reason any time I press the “New Quote” button the script for the “Tweet” button (https://platform.twitter.com/widgets.js) stops working and the good looks on the button disappear.

P.S. For some reason the Tween Button is never shown on CodePen, and the background for the quote-container isn’t shown. But these things don’t happen when I use VSCode.

Code: https://codepen.io/BiT4000/pen/JjbwpLo

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

freeCodeCamp.org

[dLetulle]

In moments like these, it’s very helpful to refer to your browsers web dev tools. Inspect your tweet button with the tools open, then click the new quote button. Notice the problem?
I’ll give you a hint, watch what changes between your twitter <a></a> tags after you click the new quote button. Also keep an eye on how your classes change.

[BiT4000]

Well, I noticed that when I click the new quote button, all this HTML the Twitter script adds disappears. I noticed that the Twitter script creates an iframe element. But when I click the new quote button, the HTML is back to the original. I still don’t know how to keep it.

[BiT4000]

I’ve found the solution! It seems the script checked my HTML for the special twitter attributes and processed them only one time when the page was loaded. So instead of putting the tag into HTML I decided to re-add the script to the page programmatically each time I press the new quote button like this:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://platform.twitter.com/widgets.js';
document.body.appendChild(script);