Twitter share button with random quote

2019-08-20 07:06发布

站内问答 / JavaScript
640 3 5

I have a problem with Twitter share button. I am creating random quotes machine which shows up a random quote and I want to make Twitter share button for actual quote that is showing up on screen. Can you guys please tell me what I have to do with this issue?

Here's 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>

And here's 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];
}

peace!

3条回答
叛逆
2楼-- · 2019-08-20 07:38

put <script src="javascript.js"></script> on the top or add listener to your button

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>

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-08-20 07:54

I added ids and an event listener to detect clicks on the new Quote button rather than running the function from the onclick attribute and then added the text to the href attribute of the tweet button.

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];
});

Here's a working jsFiddle.

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2019-08-20 07:55

Demo

set the text to href attribute

document.querySelectorAll('.twitter-share-button')[0] get the twitter share anchor tag and update the 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);

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)