Search code examples
javascripttwittershare-button

Allowing my tweet button to share the random quotes


Good morning everyone, I know this question has been asked before, but as a Noob to Javascript which i am struggling to learn, I cannot fathom out how to get my Twitter button to share the random quotes. If possible could a kind dev please explain to me how to actually type it out. I have a good understanding of HTML, CSS and Bootstrap but would appreciate someone explaining this to me.

Many Thanks in advance.

var quotes = [
  "\'It is never too late to be what you might have been.\' - George Eliot",
  "\'What lies behind us and what lies before us are tiny matters compared to what lies within us.\' - Henry Stanley Haskins",
  "\'Great thoughts speak only to the thoughtful mind, but great actions speak to all mankind.\' - Emily P. Bissell",
  "\'I haven’t failed. I’ve just found 10,000 ways that don’t work.\' - Thomas Edison",
  "\'In between goals is a thing called life, that has to be lived and enjoyed.\' - Sid Caesar"
]
function newQuote() {
  var randomNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
  
  
  <h1>Simple Quote Generator</h1>
  <div id="quoteDisplay">
  </div>
    
  <div class="quoteButton">
  <button onclick="newQuote()">New Quote</button>
   
  </div>
  <a href="http://twitter.com/intent/tweet/?text" title="Share on Twitter" target="blank" class="btn btn-twitter-"><i class="fa fa-twitter"></i> Twitter</a>
  <script src="javascript.js"></script>
</body>
</html>


Solution

  • Your link's target is static, it's always twitter.com/intent/tweet/?text. I'm not familiar with the Twitter API, but I guess it expects something like ?text=some&encoded&text at the end of the URL. You need to set the value for the text :

    <a href="" id="twitterLink">
    
    function newQuote() {
      var randomNumber = Math.floor(Math.random() * (quotes.length));
      document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
    
      document.getElementById('twitterLink').href = "http://twitter.com/intent/tweet/?text=" + encodeURIComponent(quotes[randomNumber])
    
    }