无法获取 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]);
}