title: I can't get my Javascript to copy text to the clipboard
body: <p>Need a little help from someone if that's possible.</p>
  <p>I'm crafting a drop-down DIV for my website which allows users to press a button and have the HTML character code for a variety of symbols copied to the clipboard. This is not yet in its final format - I've just created a simple HTML page to test the functionality.</p>
  <p>The issue is that it doesn't work! I'm not sure what I've done wrong.</p>
  <p>Here's my HTML which combines a basic in-line stylesheet and the Javascript:</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 copyFunction() {
    /* Get the text field */
    var copyText = document.getElementById("charInput");
  
    /* Select the text field */
    copyText.select(); 
    copyText.setSelectionRange(0, 99999); /* For mobile devices */
  
     /* Copy the text inside the text field */
    navigator.clipboard.writeText(copyText.value);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
  &lt;title&gt;Text Formatting&lt;/title&gt;
  &lt;style&gt;
  body {
  background-color: #309bbf;
  }
  .chardisp {
  width: 40px;
  text-align: center;
  }
  .charhead {
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  }
  .charbutt {
  width: 100%;
  background-color: white;
  border-radius: 2px;
  padding: 3px;
  font-family: sans-serif;
  font-size: 11px;
  color: black;
  outline: 0;
  }
  .charbutt:hover {
  cursor: pointer;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table border="0"&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;&lt;p class='charhead'&gt;FORMATTING&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;lt;b&amp;gt;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;lt;b&amp;gt;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;lt;i&amp;gt;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;lt;i&amp;gt;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;lt;u&amp;gt;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;lt;u&amp;gt;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&lt;b&gt;[ ... ]&lt;/b&gt;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&lt;b&gt;[ ... ]&lt;/b&gt;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;lt;br&amp;#47;&amp;gt;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;lt;br&amp;#47;&amp;gt;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;&lt;p class='charhead'&gt;SYMBOLS&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;trade;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;trade;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;reg;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;reg;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#161;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#161;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#191;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#191;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#223;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#223;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;amp;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;amp;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='$quot;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;quot;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;pound;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;pound;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;euro;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;euro;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#36;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#36;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#188;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#188;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#8531;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#8531;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#8532;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#8532;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#189;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#189;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#190;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#190;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#58;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#58;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#59;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#59;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#9834;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#9834;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#35;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#35;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#47;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#47;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="5"&gt;&lt;p class='charhead'&gt;ACCENTED CHARACTERS&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#192;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#192;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#193;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#193;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#194;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#194;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#195;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#195;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#196;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#196;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#224;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#224;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#225;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#225;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#226;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#226;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#227;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#227;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#228;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#228;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#199;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#199;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#231;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#231;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#200;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#200;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#201;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#201;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#202;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#202;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#203;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#203;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#232;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#232;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#233;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#233;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#234;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#234;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#235;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#235;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#204;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#204;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#205;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#205;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#206;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#206;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#207;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#207;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#236;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#236;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#237;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#237;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#238;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#238;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#239;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#239;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#210;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#210;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#211;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#211;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#212;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#212;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#213;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#213;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#214;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#214;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#242;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#242;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#243;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#243;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#244;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#244;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#245;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#245;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#246;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#246;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#217;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#217;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#218;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#218;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#219;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#219;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#220;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#220;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#249;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#249;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#250;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#250;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#251;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#251;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#252;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#252;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#221;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#221;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#159;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#159;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#253;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#253;&lt;/button&gt;&lt;/td&gt;
          &lt;td class='chardisp'&gt;&lt;button value='&amp;#255;' id='charInput' class='charbutt' onclick=\"copyFunction\"&gt;&amp;#255;&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
          &lt;tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help with this would be HUGELY appreciated. I know it's something simple but not being very good with Javascript, I don't know where to start!</p>