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