推特“Tweet分享”按钮不工作

我目前正在完成一个简单的随机报价机，你可以看到下面的代码。我无法将twitter的分享按钮集成到我的代码中。出于某种原因，我无法从它出现的报价中提取文本值，并将其动态加载到带有附加报价文本的新窗口中。我做了很多研究，找不到任何澄清。我正在使用一些Jquery。如果有人能帮助我，我将不胜感激。推特“Tweet分享”按钮不工作

主文件：

<!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; }

Quotes.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."'} 




];

App.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; 

     } 





});

来源

2016-02-01 Josh Hickman

在这一行中，您有一个错字。该函数是getElementById（注意小写'd'）。

twttr.widgets.createShareButton(' ', document.getElementbyID('quoteBox'), {text: newQuote});

即使如此，将其更改为小写字母后，我仍然得到Uncaught TypeError: document.getElementbyId is not a function。一旦我删除了这段代码并重写了它，错误消失了，所以我怀疑存在一个或多个字符的格式问题。

此外，显示在框中的文本，你需要访问newQuote对象即{text: newQuote.quote}的属性。

来源

2016-02-01 02:45:00 Jaydo

您能否详细说明我需要查看哪些信息才能解决此问题？你提到你重写了一些“代码” - 我的问题在哪里？我只是试图从根本上围绕我的头... –

你有这个代码'document.getElementByID（'quoteBox'）'。这应该在'getElementById'中使用小写的“d”。当我说我重写了代码时，我的意思是我从编辑器中删除了'document.getElementByID（'quoteBox'）'，并再次写出来，因为似乎有一些格式问题。 – Jaydo

我想通了。我只是使用了一个定制的按钮。我发现的Twitter分享按钮有点难以实现。谢谢你的帮助！ –

推特“Tweet分享”按钮不工作

回答

相关问题