[Solved] Need help with Tweet Button for random quote generator

[Solved] Need help with Tweet Button for random quote generator


Hello, I have a problem with getting my generated quote onto Twitter share!

I suspect my problem is with getting the generated text onto the twitter intent URL. There’s no response when I click on the tweet button.

Here’s my link to the code pen: http://codepen.io/kelvinlimjk/pen/WomzMd?editors=1010

Thank you so much!


Your tweet button is actually an <a> tag. Hover over it: it’s a link, not a button. tweetHandler() never fires because the browser instead navigates to the URL magically injected by (guessing here) that <script async src="//platform.twitter.com/widgets.js" > at the top. Just changing the anchor tag to a button fixes that problem.

<button class="twitter-share-button" id="tweetbutton">

But there are a few other issues in your code than may prevent it from working. Let me know if you want help/hints.


Hello Belcurv!

Thanks for replying! I have tried changing it to a button, but I think there are other issues that still prevents it from working.

I’m getting this response from the console: Is it because of how I write my Json script? I thought the encodeURIcomponent solves the problem with the URI for the commas and others.

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.
    at Function.ga.error (jquery.min.js:2)
    at ga.tokenize (jquery.min.js:2)
    at ga.select (jquery.min.js:2)
    at Function.ga [as find] (jquery.min.js:2)
    at r.fn.init.find (jquery.min.js:2)
    at r.fn.init (jquery.min.js:2)
    at r (jquery.min.js:2)
    at HTMLButtonElement.tweetHandler (VM379 pen.js:10)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.q.handle (jquery.min.js:3)


That error blurb points you to tweetHandler. There’s some … non-jQuery in there.


Thank you for pointing to the right direction!

I managed to solve this challenge :slight_smile:

One last question, what is wrong with this jQuery code?



Good work!

First, $("something") selects some DOM element, right? Like elsewhere, where you have:

$("#changeMessage")  // selects elem with id="changeMessage"
$(".quote")          // selects elem with class="quote"
$("#tweetbutton")    // selects elem with id="tweetbutton"

Notice that each of the selectors is a string wrapped in quotes. If you omit the quotes, I think jquery just freaks out. If you also omit the $ and just use message as a regular variable, the JS engine will scan the scope chain for a that variable. That variable needs to be a jQuery object in order to use the .text() method (link):

var message = $("#msg");

Also, .text() is a method (function) and needs the parentheses.

You don’t have a DOM element with ID “message”, but you do have “msg”. So you could technically do:


But you already have the quote in your JS - no need to re-capture it from the DOM.


Hi belcurv
There is an issue with the tweet function, it does not take the quote message to twiiter page. Please help me fix this bug.

//code of tweet function 
function tweet(){

        $('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text='+$("#quoteDisplay").text()).attr('target', '_blank');
//code of index.html 
<blockquote><div id="quoteDisplay" class="quote-box" >
    <a class="button" href='https://twitter.com/intent/tweet?text=' onclick="tweet()" id="tweetQuote" title="Tweet this quote!" target="_blank" >
      <i class="fa fa-twitter"></i>


THanks the issue is solved !