[英]Unable to get twitter button to share dynamic text?
I have built a random quote generator that works like so: 我建立了一个随机的报价生成器,其工作原理如下:
HTML: HTML:
<div class="row">
<div class="col-12">
<div id="quoteDisplay" class="writing">
<!-- Quotes here -->
</div>
</div>
</div>
JavaScript: 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. 这很好用,但是当尝试构建一个共享报价的Twitter按钮时,我无法使其正常工作。 I am new to JavaScript, more so with using Twitters API.
我是JavaScript新手,使用Twitters API时更是如此。 May someone explain the probably very simple concept I am missing?
有人可以解释我可能缺少的一个非常简单的概念吗? Thank you.
谢谢。
Full HTML: 完整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: 完整的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);
};
Get rid of the <i>
tag and change the onabort
to onclick
. 摆脱
<i>
标记,并将onabort
更改为onclick
。
Your .html
should look like this: 您的
.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>
Then modify your .js
like this: 然后像这样修改您的
.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]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.