随机报价的Twitter分享按钮 [英] Twitter share button with random quote

查看:141
本文介绍了随机报价的Twitter分享按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的Twitter分享按钮出现问题。我创建随机报价机器,它显示一个随机报价,我想为显示在屏幕上的实际报价制作Twitter分享按钮。你们能否告诉我我该怎么处理这个问题?

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?

这里是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];
}

平安!

peace!

推荐答案

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

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

这里有一个工作 jsFiddle

这篇关于随机报价的Twitter分享按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆