Question

我的Twitter分享按钮有问题。我正在创建随机引号机器，它显示一个随机引用，我想让Twitter分享按钮显示在屏幕上显示的实际报价。你们能告诉我这件事与我有什么关系吗？

这是HTML

<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kalam:300" rel="stylesheet">
<html>
<head>
    <title>Random Quote Generaton</title>
</head>
<body>
  <div class="container-fluid">
    <h1>Random Quote Machine </h1>
    <p>Check your quote of the today!</p>
    <div id="quoteDisplay"> 
    </div>
  </div>

  <center>
     <button class="button" onclick="newQuote()">New Quote</button>
     <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" target="_blank">
     <button class="button1"><img src="https://s6.postimg.org/cn7i6cgfl/if_Twitter_UI-01_2310223.png" />Tweet!</button></a>
  </center>

  <script src="javascript.js"></script>
</body>
</html>

这是JS

var quotes = [
  'Don\'t cry because it\'s over, smile because it happened. - Dr. Seuss',
  'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe. - Albert Einstein',
  'Be who you are and say what you feel, because those who mind don\'t matter, and those who matter don\'t mind. - Bernard M. Baruch',
  'You only live once, but if you do it right, once is enough. - Mae West',
  'Be the change that you wish to see in the world. - Mahatma Gandhi',
  'In three words I can sum up everything I\'ve learned about life: it goes on. - Robert Frost',
  'If you tell the truth, you don\'t have to remember anything. - Mark Twain',
  'Always forgive your enemies; nothing annoys them so much. - Oscar Wilde',
  'Live as if you were to die tomorrow. Learn as if you were to live forever. - Mahatma Gandhi',
  'To live is the rarest thing in the world. Most people exist, that is all. - Oscar Wilde',
  'Life is what happens to us while we are making other plans. - Allen Saunders',
  'I have not failed. I\'ve just found 10,000 ways that won\'t work. - Thomas A. Edison',
  'The man who does not read has no advantage over the man who cannot read. - Mark Twain',
  'I like nonsense, it wakes up the brain cells. Fantasy is a necessary ingredient in living. Dr. Seuss',
  'That which does not kill us makes us stronger. - Friedrich Nietzsche',
  'If you judge people, you have no time to love them. - Mother Teresa',
  'For every minute you are angry you lose sixty seconds of happiness. - Ralph Waldo Emerson',
  'It is never too late to be what you might have been. - George Eliot',
  'I\'m not upset that you lied to me, I\'m upset that from now on I can\'t believe you. - Friedrich Nietzsche',
  'Everything you can imagine is real. - Pablo Picasso',
  'Sometimes the questions are complicated and the answers are simple. - Dr. Seuss',
  'We don\'t see things as they are, we see them as we are. - Anaïs Nin'               
]

function newQuote() {
  var randomNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

平安！

Answer 1

将<script src="javascript.js"></script>放在顶部或将监听器添加到按钮

var quotes = [
  'Don\'t cry because it\'s over, smile because it happened. - Dr. Seuss',
  'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe. - Albert Einstein',
  'Be who you are and say what you feel, because those who mind don\'t matter, and those who matter don\'t mind. - Bernard M. Baruch',
  'You only live once, but if you do it right, once is enough. - Mae West',
  'Be the change that you wish to see in the world. - Mahatma Gandhi',
  'In three words I can sum up everything I\'ve learned about life: it goes on. - Robert Frost',
  'If you tell the truth, you don\'t have to remember anything. - Mark Twain',
  'Always forgive your enemies; nothing annoys them so much. - Oscar Wilde',
  'Live as if you were to die tomorrow. Learn as if you were to live forever. - Mahatma Gandhi',
  'To live is the rarest thing in the world. Most people exist, that is all. - Oscar Wilde',
  'Life is what happens to us while we are making other plans. - Allen Saunders',
  'I have not failed. I\'ve just found 10,000 ways that won\'t work. - Thomas A. Edison',
  'The man who does not read has no advantage over the man who cannot read. - Mark Twain',
  'I like nonsense, it wakes up the brain cells. Fantasy is a necessary ingredient in living. Dr. Seuss',
  'That which does not kill us makes us stronger. - Friedrich Nietzsche',
  'If you judge people, you have no time to love them. - Mother Teresa',
  'For every minute you are angry you lose sixty seconds of happiness. - Ralph Waldo Emerson',
  'It is never too late to be what you might have been. - George Eliot',
  'I\'m not upset that you lied to me, I\'m upset that from now on I can\'t believe you. - Friedrich Nietzsche',
  'Everything you can imagine is real. - Pablo Picasso',
  'Sometimes the questions are complicated and the answers are simple. - Dr. Seuss',
  'We don\'t see things as they are, we see them as we are. - Anaïs Nin'
]

document.getElementsByClassName('button')[0].addEventListener('click', function newQuote() {
  var randomNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
});

<div class="container-fluid">
  <h1>Random Quote Machine </h1>
  <p>Check your quote of the today!</p>
  <div id="quoteDisplay">

  </div>
</div>
<center>
  <button class="button">New Quote</button>

  <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" target="_blank">
    <button class="button1"><img src="https://s6.postimg.org/cn7i6cgfl/if_Twitter_UI-01_2310223.png" />Tweet!</button>
  </a>

</center>

Answer 2

Demo

将文字设置为href属性

document.querySelectorAll('.twitter-share-button')[0]获取Twitter分享锚标记并更新href

function newQuote() {
   var randomNumber = Math.floor(Math.random() * (quotes.length));
   document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
   document.querySelectorAll('.twitter-share-button')[0].href='https://twitter.com/intent/tweet/?text=' + quotes[randomNumber];
}

document.querySelectorAll(selectors);

Answer 3

我添加了id和一个事件监听器来检测新Quote按钮的点击，而不是从onclick属性运行该函数，然后将文本添加到tweet按钮的href属性。

var btn = document.getElementById( 'newQuote' );

btn.addEventListener( 'click', function(){
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    document.getElementById( 'twitterShare' ).href="https://twitter.com/intent/tweet/?text=" +  quotes[randomNumber];
});

这是一个有效的jsFiddle。

带有随机引用的Twitter分享按钮

3 个答案: