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

1

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!

2

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">
  Tweet
</button>

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

1 Like
3

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)
4

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

5

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?

tweet($(message).text);

6

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");
tweet(message.text());

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:

tweet($("#msg").text());

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

1 Like
7

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" >
    
    </div>
    </blockquote>
    <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>
    </a>
1 Like
8

Hi
THanks the issue is solved !