推特“推文分享”按钮不起作用
Twitter "Tweet Share" Button Not Working
我目前正在完成一个简单的随机报价机，您可以看到下面的代码。我在将 Twitter 的分享按钮集成到我的代码中时遇到问题。由于某种原因，我无法让它从我出现的报价中获取文本值并将其动态加载到附加报价文本的新窗口中。我做了很多研究，但找不到任何澄清。我正在使用一些Jquery。如果有人能帮助我解决这个问题，我将不胜感激。
主文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Quote Machine</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Google Font -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav> <!-- /end Navbar -->
<div class="container">
<div class="row">
<div class="col-md-6 col-offset-3 mainDiv">
<div class="well">
<h1> Random Inspirational Quotes </h1>
</div>
<div class="quoteDiv" id="quoteBox"></div>
<div clas="authorDiv" id="authorBox"></div>
<button class="btn btn-primary quoteButton" id="quoteButton">New Quote!</button>
<br />
</div>
<div class="col-md-6 col-offset-3 tweetButton">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-text="quotes.quote">Tweet</a>
</div>
</div>
</div>
<script>
// Twitter Javascript -
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!-- Quotes -->
<script src="js/quotes.js"></script>
<!-- Main Logic -->
<script src="js/app.js"></script>
</body>
</html>
.CSS：
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
padding-top: 80px;
font-family: "Fjalla One", serif; }
body h1 {
text-align: center;
padding: 5px; }
body .quoteButton {
text-align: center; }
body .mainDiv {
text-align: center; }
body .authorDiv {
padding-top: 10px;
font-style: italic;
border: 1px solid red; }
body .quoteDiv {
font-family: "Raleway", sans-serif; }
body .tweet {
padding-top: 10px; }
body .navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top; }
body .navbar .navbar-collapse {
text-align: center; }
body .tweetButton {
padding-top: 5px;
text-align: center; }
报价.js（我存储报价的地方）
var quotes = [
{author: "Bill Gates", quote: '"Success is a lousy teacher. It seduces smart people into thinking they can’t lose."'},
{author: "Larry Page", quote:'"If you’re changing the world, you’re working on important things. You’re excited to get up in the morning."'},
{author: "Warren Buffet", quote:'"It’s better to hang out with people better than you. Pick out associates whose behavior is better than yours, and you’ll drift in that direction. "'},
{author: "Phil Knight", quote:'"There is an immutable conflict at work in life and in business, a constant battle between peace and chaos. Neither can be mastered, but both can be influenced. How you go about that is the key to success."'},
{author: "Carl Ichan", quote: '"I enjoy the hunt much more than the “good life” after the victory."'},
{author: "Jeff Bezos", quote: '"I think frugality drives innovation, just like other constraints do. One of the only ways to get out of a tight box is to invent your way out."'},
{author: "Mark Zuckerberg", quote: '"The biggest risk is not taking any risk…. In a world that’s changing really quickly, the only strategy that is guaranteed to fail is not taking risks. "'},
{author: "Steve Ballmer", quote: '"Great companies, in the way they work, start with great leaders."'},
{author: "Larry Ellison", quote: '"I have had all of the disadvantages required for success."'},
{author: "Guy Kawasaki", quote: '"Ideas are easy. Implementation is hard."'},
{author: "Henry Ford", quote: '"When everything seems to be going against you, remember that the airplane takes off against the wind, not with it."'}
];
应用.js：
$(document).ready(function() {
console.log('ready!');
$('#quoteButton').click(function randomQuote() {
newQuote = quotes[ranNum()]
$('#quoteBox').hide().text(newQuote.quote).fadeIn('slow');
$('#authorBox').text(newQuote.author);
twttr.widgets.createShareButton(' ', document.getElementbyID('quoteBox'), {text: newQuote});
});
function ranNum() {
return Math.floor(Math.random() * quotes.length);
}
function generateTweet(text) {
var tweetbutton = document.createElement('a');
tweetButton.setAttribute('href', 'https://twitter.com/share');
tweetButton.setAttribute('class', 'twitter-share-button');
tweetButton.setAttribute('data-count', 'horizontal');
tweetButton.setAttribute('data-text', text);
return tweetButton;
}
});
在这一行中，您有一个错字。该函数getElementById（注意小写的"d"）。
twttr.widgets.createShareButton(' ', document.getElementbyID('quoteBox'), {text: newQuote});
即便如此，将其更改为小写后，我仍然Uncaught TypeError: document.getElementbyId is not a function.一旦我删除了这段代码并重写了它，错误就消失了，所以我怀疑一个或多个字符存在格式问题。
此外，要在框中显示文本，您需要访问newQuote对象的属性，即 {text: newQuote.quote} .
相关文章：
- Twitter API JSON调用未获得最新的3条推文
- 在我的网站上以纯文本形式添加最新推文
- 如何从给定的用户和给定的标签中获取所有推文
- 显示多个推特分享按钮
- 在Fancybox中加载推特推文按钮对话框
- 阻止推特分享按钮加载不正确
- 如何将推文按钮的功能放在提交按钮上
- 显示默认推文的推特按钮
- 在Jquery中发送带有推文按钮点击的随机报价
- 无法分享包含引用和作者(FCC Random Quote Machine）Javascript/JQuery的推文
- 推特分享按钮动态网址分享
- 推特“推文分享”按钮不起作用
- 使用自定义推特推文按钮自动缩短网址
- 推文按钮在IE7中无法正确显示，但在Mozilla，chrome和IE 8中工作正常
- 更改推特推文按钮文本
- 分享选定的图像，当用户点击推特/facebook按钮
- 如何使用自定义推文按钮选择文本长度
- 如何，推文按钮示例代码帮助
- 没有推特图标的推特分享按钮，只有分享
- 推特和脸书分享网站分享按钮
