Help with tweet out quote button

I’m having trouble making the tweet button actually tweet out the quote that’s currently on the screen. I really just don’t understand it all and I can’t get it to work and it’s so frustrating. This is what I have done so far: https://codepen.io/schmattycake/pen/EXxoRe

Please halp

Hey there!

It looks like you are trying to use jQuery for part of the project but not including it in your project. That is the first thing i would check to get the project fully functional.

Check the console on your function errors, they are causing you problems as well.

Good Luck!

Your going to need encodeURI() for the twitter url and two of the following functions:

.click(function(){

})

you do need the encodeURI, but you don’t need the .click function, FYI.

Something like this:

$(this).attr("href", 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(quoteMachine[randomNumber]));

I added this to my code but it still doesn’t tweet the quote out. I really don’t understand what I’m doing wrong and I’m getting really frustrated with myself.

taking a look, just a sec…

thanks. i tried to put it in the .click(function() {{) as well and it still doesn’t work.

Ok so three things:

First, a quote wasn’t loading to the screen because even tho you had the function defined to determine which quote to use and where on the page to put it, there wasn’t any actual call to the function itself.

Second, you’re using a jQuery (this) to define the href for the twitter link, but (this) has no frame of reference, or at least not the one you want; so instead of $(this) it would be better to use $(".twitter-share-button"), and it would also be better served to place that line into the newQuote() function so that when newQuote() is executed it defines both the quote and the desired twitter link.

Third is that you don’t have jQuery loaded in your CodePen. Not that it’s requisite to have jQuery to do what you’re doing, but you would need to modify your reference to the twitter link to use vanilla JS if you aren’t going to use jQuery.

I did a fork of your codepen, added jQuery and modified the code to make it work:

 function newQuote() {
   var randomNumber =  Math.floor(Math.random() * (quoteMachine.length));
document.getElementById('words').innerHTML = quoteMachine[randomNumber];
    $(".twitter-share-button").attr("href", 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(quoteMachine[randomNumber]));
  }


$(function() {
  newQuote();
});

the $(function()… bit is the equivalent of doing a $(document).ready(function()… after doing the above, the page loaded the quote properly and the twitter link included the quote as well.

Hi, I had this same exact problem with my random quote machine i just completed here: quote machine

It drove me mad! I know how you feel.

Your code is wrong. You used $(this) when you have not referred to the object. instead of $(this), use something like the ID $("#tweet").attr(....................).

Now another problem is your tweet button. It has a function called myFunction() and I could not find that function in your JS code. you should delete if you are not using it.

And if you are going to use jquery, you need a $(document).ready() function which the jquery runs when the page has load.

You have to rearrange your code again.

Also also, you may want to add the twitter js library so you get the little pop-up window instead of going to a new tab/window: just add https://platform.twitter.com/widgets.js to the JS settings of your codepen

Thank you sooooo much. I really didn’t know how to fix my code to make it work. I see that I had /some/ idea of what I needed to do but now I realize where I went wrong. Thank you so dang much.

no worries – squanchy idea for your page by the way!

hahahaha, thank you!