無法使Twitter按鈕共享動態文本？

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

這很好用，但是當嘗試構建一個共享報價的Twitter按鈕時，我無法使其正常工作。 我是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]);
}