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>

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

删除<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]);
}

无法获得Twitter按钮来共享动态文本？

1 个答案: