How to replace data-text content with javascript variable


how to replace data-text content if we have javascript variable from text area?
example :

    <div class="input-control textarea">
             <textarea id='text1' placeholder="Enter Your Tweet"></textarea>

<script type="text/javascript">
    var tweet = document.getElementById('text1').value;

<a href="" class="twitter-share-button" data-text="costum data-text with javascript variable" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I would like to change data-text=“costum data-text with javascript variable” with var tweet


You would need to generate the Tweet button dynamically, after the custom text has been provided by the user, or alternatively use a function to pop-up the Web Intent directly. I guess you want the user just to click the button to pop-up the Tweet, so it might be better to go with the latter route, rather than using a Tweet Button widget.

We don’t do any dynamic data binding to page content at the present time, although I’m sat here mulling the possibilities and it could be pretty interesting to support something like that. (Like data-bind-text="#text1" or something… maybe in the future :-))


…maybe in the future… ? Curious if anything was done with this. Trying to do this now by dynamically changing the data-text attribute value as a user types text into a . I can change the value no problem - but the new text isn’t appearing in the tweet. I want to create a that the user type into and then save to our database, and/or tweet.


Parameters are evaluated when Twitter’s widgets-js initializes on the page, scans for a Tweet button, and loads the Tweet button. If additional actions have taken place on your page which should affect the Tweet button you should reinitialize the Tweet button portion of the page.

Declare a container to hold the Tweet web intent and the data-* parameters used to initialize a Tweet button. Output this markup on the initial page load. Store any parameters which should not change based on the state of the page, such as #hashtags and via, so you may add them back when altering for just the changed data later.

You can clear the container and insert a Tweet button with each change. Two options: call a JavaScript factory function or insert an anchor element and ask Twitter’s JavaScript to scan the container and load a new Tweet button.

  1. Create a new anchor element with a twitter-share-button class for identification by Twitter's widgets-js scanner.
  2. Build query parameters to be appended to
  3. Construct any data-* attributes with Tweet button display options.
  4. Call twttr.widgets.load() on the button's parent element container after you've inserted the anchor into the page.
  5. Twitter's widgets-js will scan for a.twitter-share-button inside your container and initialize a new Tweet button.