Unable to get twitter button to share dynamic text?

Question

I have built a random quote generator that works like so:

HTML:

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

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];
};

This works great, but when attempting to build a twitter button that shares the quote, I was not able to get it to work. I am new to JavaScript, more so with using Twitters API. May someone explain the probably very simple concept I am missing? Thank you.

Full HTML:

    <div class="row">
                    <div class="col-12 buttons">
                        <button type="button" class="btn btn-outline-danger" onabort="tweetIt()"><i class="fa fa-twitter" aria-hidden="true"></i></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>

Full JS:

    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 phrase = document.getElementById('quoteDisplay').innerText;
  var tweetUrl = 'https://twitter.com/share?text=' +
    encodeURIComponent(phrase) +
    '.' +
    '&url=' +
    'http://www.cookbooktitlegenerator.com/';

  window.open(tweetUrl);
};

Answer 1

Get rid of the <i> tag and change the onabort to onclick .

Your .html should look like this:

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

Then modify your .js 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]);
}