[Solved] Having trouble with my click to tweet link

[Solved] Having trouble with my click to tweet link
0.0 0

#1

So I am working on the random quote machine project and I am running into this issue where when I click the twitter icon to attempt and tweet the quote, it pulls up the original text of the paragraph instead of the new quote. On top of that I have a
in the quotes to separate the author from the quote and when you tweet the quote is shows the
symbol in there with the quote. I have tried to change the tweet quote variable to match my function but it just makes it either pull up an empty twitter page, or nothing at all. What can I do to fix this?

Here is a link to the code pen (keep in mind some of the quotes are a little NSFW):

http://codepen.io/the702guy/full/GrxyVJ/

Please feel free to look at the code to see what I am doing wrong. I am still new to all of this as I have only been coding for a week or so. Any help would be much appreciated.


#2

Hello!
You should use some function like getQuoteText() that return current quote and trigger it on click event. Now you have a variable tweetQuote that get it’s value on load and then it never changed. There is no function that update this variable.
I hope you can understand my illegible explanation.


#3

Hi, I forked your code and I think I fixed it. Feel free to take a look: https://codepen.io/marquesin/pen/xgjjGd?editors=1010 and here is a list of the changes to your JS tab:

var tweetQuote="";

declaration before

var newQuote = function newQuote() {…

declaration. I need to do this because I intend to call this variable inside the newQuote() func.

So next I moved this line

tweetQuote= document.getElementById(“quoteText”).innerHTML = quotes[randomNumber];

to the inside of your newQuote function. This way, when you click to get a new quote your variable tweetQuote gets updated as well, like @ciases said it should.

I hope this helps.

Cool design, by the way! :sunglasses: Congrats!


#4

Thanks man, I appreciate the feedback as well! I did all of that except for declare the variable at the top first, that’s definitely where I went wrong. Such a dumb little mistake haha. Any chance you know how to get rid of the ><br /> that pops up with it?


#5

It is possible to take the <br /> out, but I think it will involve a lot of string manipulation and make your neat code become “messy”.

How about changing your data structure from:

var quotes = [ “quote <br /> author”, “…”, “…”, …]

to:

var quotes = [ {“quote”: “quote”, “author”: “author”} , {…}, {…}, …]

that way you can manipulate your data better.


#6

I figured it out. All I had to do was add:

.replace('<br />',' ')

to the end of my tweetQuote variable. It was a very easy fix and I didn’t have to make any other changes. I also added transition effects to the quotes now so it looks a lot better. Thanks for your help man!