skip to Main Content

I’m trying to code a “Tweet this” button that opens a new window on Twitter with pre-generated text. What I’m getting now is a window on Twitter with the URL of where I came from. I’m using the JQuery API to do this. The link to my project is http://codepen.io/haldav/pen/KVpojP. And my code is:

$(document).ready(function() {
  random();

function random() {
var quotes = ["You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.", "Defeat is a state of mind; no one is ever defeated until defeat has been accepted as a reality.", "The moment has no yesterday or tomorrow. It is not the result of thought and therefore has no time.", "Real living is living for others.", "Never waste energy on worries or negative thoughts, all problems are brought into existence -drop them.", "A goal is not always meant to be reached. It often serves simply as something to aim at.", "Those who are unaware they are walking in darkness will never seek the light.", "Because one does not want to be disturbed, to be made uncertain, he establishes a pattern of conduct, of thought, a pattern of relationship to man etc. Then he becomes a slave to the pattern and takes the pattern to be the real thing."];

randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
quote = randomQuote.split("randomQuote");
$('.quote').text(quote[0]);
  }

$(".button").on("click", function() {
random();
  });
});

My HTML code is:

<div class="text-center" id="jumbotron">
<h1 class="main-text">The Wisdom of Bruce Lee</h1>
<p class="p-text">Although Bruce Lee died at a considerably young age, he was wise beyond his years. For my random quote machine, I chose to showcase some of his wisdom. For this exercise, I used a little JQuery, Bootstrap, CSS and HTML.        </p>
<div class="well">
  <p class="quote" id="tweet"></p>
</div>
<div class="text-center">
  <button class="button" id="quote">New Quote</button>
  <br />
  <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" data-size="large" target="_blank">
  <button type="button" class="btn btn-primary">Tweet this!</button></a>
</div>
<div footer>
  <p class="text-center">Copyright © David C. Hall 2015</p>
</div>

I’m stumped. Any suggestions? Thanks.
EDIT: I am getting a new window to open but I need it to display the random quote in the textbox.

2

Answers


  1. Chosen as BEST ANSWER

    Figured it out! All I had to do was add

    $(this).attr("href", 'https://twitter.com/intent/tweet?text=' + randomQuote);
    

    to my JS code.


  2. Remove target="_blank" in hyper link.

    Your Html should be

        <div class="text-center" id="jumbotron">
        <h1 class="main-text">The Wisdom of Bruce Lee</h1>
        <p class="p-text">Although Bruce Lee died at a considerably young age, he was wise beyond his years. For my random quote machine, I chose to showcase some of his wisdom. For this exercise, I used a little JQuery, Bootstrap, CSS and HTML.        </p>
        <div class="well">
          <p class="quote" id="tweet"></p>
        </div>
        <div class="text-center">
          <button class="button" id="quote">New Quote</button>
          <br />
    <!--changes made here --->
          <a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text=" data-size="large">
          <button type="button" class="btn btn-primary">Tweet this!</button></a>
        </div>
        <div footer>
          <p class="text-center">Copyright © David C. Hall 2015</p>
        </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search