How do I pass text into a javascript variable/function?

Question

I want to create inline "tweetable quotes". For example:

1) User clicks on a line of text, noted with a highlight/different color to indicate that it's clickable. E.g.

<span class="tweetable_quote">this is an amazing quote</span>

2) Window opens using Twitter intent[1] with the quote included. E.g.

window.open("https://twitter.com/intent/tweet?text=this%20is%20an%20amazing%20quote")

How can I pass in the text ("this is an amazing quote") as a URL encoded variable to be used within the Twitter intent URL? Note that there may be several "tweetable quotes" on the same page.

Thanks in advance for the help!

[1] https://dev.twitter.com/docs/intents

UPDATE

I tried implementing the suggestion below, adding the following code in the :

<script type="text/javascript">
//  this will be the click handler for all elements with the "tweetable_quote" class.
$(".tweetable_quote").on('click',function(){
  // $(this) refers to the element that was clicked.
  var text = $(this).text();
  window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(text));
});
</script>

<span class="tweetable_quote">This is some quotable text.</span>

When the page loads, the following error is displayed in the console:

Uncaught TypeError: Object #<Object> has no method 'on'
(anonymous function)

My apologies and thanks for the trip, Lix! I will go back and make sure to appreciate those who've helped me in the past. — rrhoover
– rrhoover, Commented Dec 31, 2012 at 0:19

Koes Bong · Accepted Answer · 2013-01-02 21:40:04Z

1

Try this:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    var $quoteEl = $('.tweetable_quote');

    $quoteEl.on('click',function(){
      var text = $(this).text();
      window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(text));
    });
  });
</script>

edited Jan 2, 2013 at 21:40

answered Jan 2, 2013 at 20:17

Koes Bong

1,1233 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Koes Bong Over a year ago

basically needs to wrap it inside the document ready function

rrhoover Over a year ago

Thanks! Works beautifully :)

nekman · Accepted Answer · 2012-12-30 22:31:59Z

1

Could be done something like this, using jQuery.

$('.tweetable_quote').on('click', function() {
  window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent ($(this).text()));
});

answered Dec 30, 2012 at 22:31

nekman

1,9192 gold badges15 silver badges26 bronze badges

Comments

Lix · Accepted Answer · 2012-12-30 22:32:03Z

1

Perhaps this is what you are looking for -

//  this will be the click handler for all elements with the "tweetable_quote" class.
$(".tweetable_quote").on('click',function(){
  // $(this) refers to the element that was clicked.
  var text = $(this).text();
  window.open("https://twitter.com/intent/tweet?text="+encodeURIComponent(text));
});

I'm using the encodeURIComponent() function here to correctly encode the text -

encodeURIComponent - Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

answered Dec 30, 2012 at 22:32

Lix

48.2k12 gold badges107 silver badges134 bronze badges

1 Comment

rrhoover Over a year ago

Thanks, @Lix but I receive the following console error when the page loads: Uncaught TypeError: Object #<Object> has no method 'on' testing: (anonymous function) Code: <script type="text/javascript"> "tweetable_quote" class. $(".tweetable_quote").on('click',function(){ var text = $(this).text(); window.open("twitter.com/intent/tweet?text="+encodeURIComponent(text)); }); </script> <span class="tweetable_quote">This is a quotable sentence.</span>

Collectives™ on Stack Overflow

How do I pass text into a javascript variable/function?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related