Twitter button not tweeting properly

Question

I have a Random Quote Generator (http://codepen.io/anon/pen/wgqWgo) and when trying to tweet a quote, I get the following result:

I am not linking my quote correctly I assume in my function. Being new to JavaScript it is hard to tell what though. I have searched extensively on this and can't seem to find a solution.

My HTML:

<div class="row">
                    <div class="col-12 buttons">
                        <a class="twitter-share-button" href="http://twitter.com/share" target="_blank"><button type="button" class="btn btn-outline-danger" onclick="tweetIt()"><i class="fa fa-twitter" aria-hidden="true"></i></button></a>
                        <button type="button" class="btn btn-outline-danger" onclick="newQuote()">Quote</button>
                    </div>
                </div>

  <div class="row">
                    <div class="col-12">
                        <div id="quoteDisplay" class="writing">
                            <!-- Quotes here -->
                        </div>
                    </div>
                </div> 

My JavaScript:

var quotes = [
    "There is nothing to writing. All you do is sit down at a typewriter and bleed.",
    "Happiness in intelligent people is the rarest thing I know.",
    "The world breaks everyone, and afterward, some are strong at the broken places."
]
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
};

$(".twitter-share-button").click(function(){
    $(this).attr("href", 'https://twitter.com/intent/tweet?text=' + randomNumber);
  });

Answer 1

The link that is being used in your code, is the one in the <a> tag.

You don't want that. That link has no data being passed in, therefore twitter is defaulting the URL as twitter.com/intent/tweet?url=&original_referer= which produces the text as the URL you are coming from. (In your case it's your local).

There's no need to wrap the twitter button an the <a> tag since you are using the oncick() function.

The following code seems to do what you are trying to accomplish.

First modify your HTML as follows:

<div class="row">
                    <div class="col-12 buttons">
                         <button type="button" class="btn btn-outline-danger" onclick="tweetIt()">Tweet</button>
                        <button type="button" class="btn btn-outline-danger" onclick="newQuote()">Quote</button>
                    </div>
                </div>

  <div class="row">
                    <div class="col-12">
                        <div id="quoteDisplay" class="writing">
                            <!-- Quotes here -->
                        </div>
                    </div>
                </div> 

And your .js should look like this:

var quotes = [
    "There is nothing to writing. All you do is sit down at a typewriter and bleed.",
    "Happiness in intelligent people is the rarest thing I know.",
    "The world breaks everyone, and afterward, some are strong at the broken places."
]
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
};

function tweetIt(){
var randomNumber = Math.floor(Math.random() * (quotes.length));
window.open("https://twitter.com/intent/tweet?text=" + quotes[randomNumber]);
}