Several questions related to Random Quote Generator [Solved]

1

I’m having 2 problems I would love help with.

First problem
I’ve been working on the Random Quote Generator for a couple of days. I have the quote generation working, but it is messy. I have the quotes array in my code twice to make it work, which is stupid, but is the only way I have gotten it to work. I have a function which calls a random quote when the page loads and another to load quotes and change page styling when the button is clicked. I have the quotes array inside both of these functions.

When I take it out of the functions the button clicking function does not fully work. It only modifies the styling for some reason.

Second problem
I’m basically just lost on the tweet button. I’ve read the Twitter documentation and I’m just confused. Nothing I’ve done has any effect on the Twitter icon when you click it. I’ve turned it into a button. I’ve left it as is. If I could figure out how to simply have it react at all when clicking on it, I’m confident I know how to pull the quote into it.

Below are two Codepens.
In this one the quote generation is working when you click the button.

In this one only the quote generation at loading works.

Thanks for your help.

2

Using the second Codepen, the reason the quote never changes, is because pnum and qnum never change after their initialization outside of the click event.

Just add the same two statements (without var of course) inside the click callback function. That way, with every click of New Quote, these will have new randomly selected values.

1 Like
3

Aha! That makes sense. I’ve been working on that all day. Thanks.

4

As for the twitter button, you can get rid of all your current twitter related JavaScript and do something like:

$("#twitter-button").on("click", function(){
  var currQuote = $("#quote").text();
  var currPerson = $("#person").text();
  var twitterURL = "http://twitter.com/share?text="+ currQuote + currPerson;
  window.open(twitterURL, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");
});
5

Wow. Thanks.

I knew it was easier than I was trying to make it. I’m going to have to sit down and make sure I understand this before I move forward. I’ve looked a number of other projects trying to figure this out and watched about 3 hours of tutorials on jQuery trying to see if this tweet button thing would just come to me.

Of course by “easier” I mean, less code. Having not full digested jQuery yet, I need to do a little studying to have a better understanding so I can pull this off on my own.

6