title: Using twitter widgets with html anchor <a> tag rendered by javascript
body: <p>I am using the code from the <a href="https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview" rel="nofollow noreferrer">twitter for websites guide.</a>
  I have put the JavaScript code snippet from step 4 into a function I have called tWidgit.</p>
  <p>This code converts the text hyperlink into a Tweet button. It is working when I hard-code Twitters HTML but it is not working for the link that is generated by my JavaScript. I did set the class on line 36:</p>
  <blockquote>
  <p>tw.class = &quot;twitter-share-button&quot;;</p>
  </blockquote>
  <p>The JavaScript sets up a listener for the details elements and creates a hyperlink based on the data attribute from each summary item on click. I am trying to make a tweet button that allows the user to tweet the URL. I need to use their JavaScript. Here is my <a href="https://codepen.io/j354374/pen/gOMJdPB?" rel="nofollow noreferrer">codepen</a>.</p>
  <p>Please also see my code attached:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function tWigit() {
  window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
      t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
  
    t._e = [];
    t.ready = function(f) {
      t._e.push(f);
    };
  
    return t;
  }(document, "script", "twitter-wjs"));  
  }
  
  
  const root = "https://www.onetonline.org/link/summary/";
  const twt = "https://twitter.com/intent/tweet?url=https://www.onetonline.org/link/summary/";
  
  const fs = document.createElement('a');
  fs.id="FS";
  const linkText = document.createTextNode("functional skills");
  fs.appendChild(linkText);
  fs.classList.add("hide");
  fs.title = "functional skills";
  fs.href = "https://www.onetonline.org/link/summary/";
  //document.body.appendChild(fs);
  document.getElementById("p1").appendChild(fs);
  
  const tw = document.createElement('a');
  tw.id="TW";
  tw.class = "twitter-share-button";
  const tweetText = document.createTextNode("Tweet");
  tw.appendChild(tweetText);
  tw.classList.add("hide");
  tw.title = "Tweet";
  tw.href = "https://twitter.com/intent/tweet?url=";
  tw.target = "_blank";
  document.getElementById("p2").appendChild(tw);
  tWigit();
  
  document.getElementById("container").addEventListener("click",function(e) {
    const tgt = e.target;
    const isSummary = tgt.tagName==="SUMMARY";
    const code = tgt.dataset.code;
    fs.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary &amp;&amp; code) {
      fs.href=root+code;
    }  
    tw.classList.toggle("hide",!isSummary || !code); // show only if summary AND code exists
    if (isSummary &amp;&amp; code) {
      tw.href=twt+code;
    }  
  
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hide { display:none; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;details id="agriculture" class="details"&gt;
      &lt;summary&gt;Agriculture&lt;/summary&gt;
      &lt;details&gt;
        &lt;summary data-code="53-7064.00"&gt;Picking &amp; packing&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="45-2092.02"&gt;Farm worker&lt;/summary&gt;
      &lt;/details&gt;
  
      &lt;details&gt;
        &lt;summary data-code="45-2091.00"&gt;Agricultural Equipment Operator&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="45-2093.00"&gt;Farmworkers, Farm, Ranch, and Aquacultural Animals&lt;/summary&gt;
      &lt;/details&gt;
  
    &lt;/details&gt;
  
    &lt;details id="construction" class="details"&gt;
      &lt;summary&gt;Construction&lt;/summary&gt;
      &lt;details&gt;
        &lt;summary data-code="47-2061.00"&gt;Construction Labourer&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="47-2073.00"&gt;Operating Engineers and Other Construction Equipment Operators&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details data-code="47-2051.00"&gt;
        &lt;summary&gt;Cement Masons and Concrete Finishers&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="47-2021.00"&gt;Brickmasons and Blockmasons&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="47-4031.00"&gt;Fence Erector&lt;/summary&gt;
      &lt;/details&gt;
      &lt;details&gt;
        &lt;summary data-code="17-3031.01"&gt;Surveying Technician&lt;/summary&gt;
      &lt;/details&gt;
    &lt;/details&gt;
  &lt;/div&gt;
  
  &lt;p id="p1"&gt;&lt;/p&gt;
  &lt;p id="p2"&gt;&lt;/p&gt;
  
  &lt;a class="twitter-share-button"
    href="https://twitter.com/intent/tweet"&gt;
  Tweet&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please note final code using twttr.widgets.createShareButton is <a href="https://codepen.io/j354374/pen/Bazgpzw" rel="nofollow noreferrer">here</a></p>