Quote page - Twitter share text doesn't change with new quote

1

Hey guys, I need help.

I’m almost done with the Quote Machine challenge. But there’s a little hiccup with the Twitter button I can’t seem to unstick.

Every time the page loads, a quote is generated and displayed. If you click the Tweet button on the upper right corner, a window pops up with the quote and the movie where it comes from. All good. But then when I click on the image and generate a new quote, the Twitter share text still has that very first quote in there. I can’t change it no matter what I do.

I know that the quote itself is changing. Else it wouldn’t display on the page. So why isn’t the twitter text changing too?

Here’s a link to my project:

Thank you!

2

Nevermind, figured it out!

For anyone who runs into a similar problem, try changing how you get the Twitter API in your pen. I originally put in this script from the Twitter dev documentation at the top of my Javascript panel:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

Turns out that’s completely unnecessary. I just put in https://platform.twitter.com/widgets.js as an external script in the Pen’s settings instead, and used twttr.widgets.load(); whenever I reset my quote and twitter text. Just check out my code if you want to look into it more.

3

you can simply use something like

window.open("https://twitter.com/intent/tweet?hashtags=quote&text=" + '"' + quote + '" ' + author);

twitter api is pretty simple if you simply want to twit something

also if the contents of the quote on that request don’t change it means a problem with asynchronicity, you should nest some function in another one or something

4

What’s asynchronicity?

5

in short, for the quote machine you have to either use a wider scale variable or you should nest button event listeners inside the getjson callback

https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript

1 Like
6

Thank you for the link! I only skimmed it for now because it’s night here and my brain’s already tired, but it looks very helpful. I’ll make sure to read it tomorrow :grinning: