Невозможно получить кнопку щебета для обмена динамическим текстом?

Question

Я построил генератор случайных цитаты, которая работает следующим образом:

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

Это прекрасно работает, но при попытке создать кнопку твиттере, что акции цитата, я не смог заставить ее работать. Я новичок в JavaScript, тем более с использованием Twitters API. Может кто-нибудь объяснить, возможно, очень простую концепцию, которую я пропускаю? Спасибо.

Полный 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> 

Полный 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

Избавиться от <i> тега и изменить onabort к onclick.

Ваш .html должен выглядеть следующим образом:

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

Затем измените .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 randomNumber = Math.floor(Math.random() * (quotes.length)); 
window.open("https://twitter.com/intent/tweet?text=" + quotes[randomNumber]); 
}