在Javascript中动态更新twitter按钮的数据文本

我正在开发一个随机报价生成器，希望我的twitter按钮的数据文本在按下“newQuote”按钮时自动更新

当我单击newQuote按钮时，我的页面显示随机选择的quote。我想它，使推特按钮推特当前随机报价显示

我第一次按下newQuote按钮时，它就工作了，但之后，twitter按钮不会自动更新

HTML:

<button type = "button" id ="newQuote">
New Quote  
</button>

<div>
<a id = "twitter-button"></a>
</div>

---

问题是您正在使用ID为

twitter按钮的锚

但是一旦你加载了Twitter小部件，它就会用一个没有ID的
iframe
来替换这个锚，这样你的代码就停止工作了。解决这个问题的方法是将锚更改为使用CSS类
twitter共享按钮
，因为生成的
iframe
也附加了这个类

然后，不要做：

// HTML
<a id = "twitter-button"></a>
// CSS
var tweetDiv = document.getElementById("twitter-button");

//HTML
//CSS
var tweetDiv=document.getElementById（“twitter按钮”）；

您可以将其更改为：

// HTML
<a class="twitter-share-button"></a>
// JS
var tweetDiv = document.querySelector(".twitter-share-button");

//HTML
//JS
var tweetDiv=document.querySelector（“.twitter共享按钮”）；

请看下面的示例：



新报价
变量引号=[
“环境是什么？我创造环境”，
“生活不是发现你自己。生活是创造你自己。”，
“担忧是对想象力的滥用”，
];
var作者=[
“纳波利安”，
“萧伯纳”，
“丹·扎德拉”，
];
window.onload=函数（）{
document.getElementById（“newQuote”）.onclick=function（）{
var random=Math.floor（Math.random（）*（quotes.length））；
document.getElementById（“quote”）.innerHTML=quotes[random]；
document.getElementById（“author”）.innerHTML=authors[random]；
createButton（）；
}
}
函数createButton（）{
var msg=document.getElementById（“quote”）.innerHTML；
var tweetDiv=document.querySelector（“.twitter共享按钮”）；
var link=document.createElement（“a”）；
link.setAttribute（“href”https://twitter.com/share");
setAttribute（“类”，“twitter共享按钮”）；
link.setAttribute（'id'，'twitter'）；
link.setAttribute（“数据文本”，“消息+”）；
setAttribute（“数据大小”、“大”）；
tweetDiv.parentNode.replaceChild（链接，tweetDiv）；
twttr.widgets.load（）；
}
! 功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]，
p=/^http:/.test（d.location）？'http'：'https'；
如果（！d.getElementById（id））{
js=d.createElement；
js.id=id；
js.src=p+'：//platform.twitter.com/widgets.js'；
fjs.parentNode.insertBefore（js，fjs）；
}
}（文档“脚本”、“twitter wjs”）；
您可以在下次无法获取
twitter按钮时第一次覆盖父元素

像这样更新你的函数

function createButton() { 
      var msg = document.getElementById("quote").innerHTML;
      if(document.getElementById("twitter").length)
      return      document.getElementById("twitter").setAttribute("data-text",msg);
      var tweetDiv = document.getElementById("twitter-button");
      var link = document.createElement("a");

      link.setAttribute("href", "https://twitter.com/share");
      link.setAttribute("class", "twitter-share-button");
      link.setAttribute('id', 'twitter');
      link.setAttribute("data-text", "" + msg + "");
      link.setAttribute("data-size", "large");
      tweetDiv.parentNode.replaceChild(link, tweetDiv);
      twttr.widgets.load();
}

function createButton() { 
      var msg = document.getElementById("quote").innerHTML;
      if(document.getElementById("twitter").length)
      return      document.getElementById("twitter").setAttribute("data-text",msg);
      var tweetDiv = document.getElementById("twitter-button");
      var link = document.createElement("a");

      link.setAttribute("href", "https://twitter.com/share");
      link.setAttribute("class", "twitter-share-button");
      link.setAttribute('id', 'twitter');
      link.setAttribute("data-text", "" + msg + "");
      link.setAttribute("data-size", "large");
      tweetDiv.parentNode.replaceChild(link, tweetDiv);
      twttr.widgets.load();
}