How to tweet out a quote (using vanilla JS)

How to tweet out a quote (using vanilla JS)
0.0 0

#1

Hello Everyone. I have completed 90% of the Random Quote Generator, but I am battling to tweet out the quote. I am using vanilla Javascript. I have come across some solutions for this but I am battling to incorporate them into my own code. My tweet button works, and so does everything else, but I cannot get my quote text to appear inside the the “What’s happening?” twitter text box. Please may someone kindly point out what I need to do to get this working. Thank you. Here is the url to my codepen:

Random Quote Generator

I have added comments in my code for clarity. Any help is much appreciated!


#2

Hi Steph

If you check the value of your variable tweetButton by typing it in the console, it returns undefined.

I think you have a typo/mistake on line 44 of your js.

Should be getElementsByClassName (plural)[getElementsByClassName] - this will return an array like HTMLCollection [HTMLCollection] To target a single element you might want to give it an id attribute in your html and target that instead with getElementById?

Hope that helps :slight_smile:


#3

Thanks very much phatbhoy67 for taking the time to help me out! I have corrected that spelling error, and it is now returning an HTMCollection array. Hopefully now I can get it working! Thanks so much again for your assistance! :slight_smile:


#4

Hi Steph1 , you’re welcome.

I had another look at your pen, tweetButton.createElement(‘a’) within your function generateTweetButton, line 47 in your js file, is causing an error, to see that you will need to open dev tools/web console on whichever browser you are using.

You reasoning is nearly there, rather than create an element on another element (not allowed and the reason for the error), you need to first create a new element and then add it to the document. There are many methods to add an element to the document.

eg:

var x = document.createElement("A");
x.href = "https://google.com";
x.text = "This link will open google search";
document.body.appendChild(x);

In your approach so far, it looks like you want to dynamically replace the existing “a” element when a new quote is generated.

This reference might be worth a read:

[https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild](http://MDN: replaceChild())

You might also consider how you are targeting the element you want to change. Is “tweetButton” returning what you expect/want?

I sometimes find it difficult to debug within codepen, so I created this from your code.

[https://repl.it/@phatbhoy67/NextDisfiguredForm](replit link)

I’ve added some comments in the js file [index.js, under the list of files on the left hand side] which I hope you will find helpful.

You need to click “run” to get started I think.

Feel free to fork it and change it up etc.

If anything doesn’t make sense or you get stuck, reply and I will try my best to help. :smiley:


#5

Wow phatbhoy67 thanks so much for all your help! So much appreciated! I eventually ended up using getElementById (I changed the html and css accordingly). It was easier for me to work with (this was before I looked at your code that used the class name - that really helped explain to me how to work with getElementsByClassName so thanks for that!)

After working for most of the day on this I have FINALLY got it working. I created a separate click event for the tweet button (probably unnecessary but seemed to make sense at the time), but on each click it was duplicating the i and span tags so I incorporated your replaceChild() method. The funny thing is when I tried to pass two arguments into it, it didn’t work, but when I left it with no arguments it works?! I really can’t figure this out. See link below (only if you have the time), I’d be interested to know why this works! Ha ha! Thanks so much again, you’re a star!

https://codepen.io/clownhead/pen/dKPdeP


#6

Hi Steph

No worries. I have tried to answer your questions by commenting the code in the index.js file here:

[https://repl.it/@phatbhoy67/RecklessRunnyServicepack](http://link to replit)

The new comments I’ve added are the one’s between /* */ for quick identification.

I hope that helps.

Let me know if anything isn’t clear or if you have further questions, I’ll try my best to help.

Right at the bottom I’ve added few points you may want to consider, anyway, pleased you got it to work! :slight_smile:


#7

Thanks phatbhoy67! Your comments and suggestions have been great and have really helped me solve this project. I also really appreciate your suggestions on how I can improve my code, what a bonus, thank you so much! :slight_smile: