title: Copy to clipboard javascript navigator.clipboard.write
body: <p>It is a color picker random generator.</p>
  <p>On click of a button, it does not copy hex code to the clipboard.</p>
  <p>It is giving error</p>
  <blockquote>
  <p>Uncaught  typeerror copyText.select is not function</p>
  </blockquote>
  <p>Copied the text: undefined copytext[object HTMLSpanElement]</p>
  <p>navigator​.​clipboard​.​write​Text or navigator​.​clipboard​.​write​</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> const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
   const btn = document.getElementById("button");
   const color = document.querySelector(".color");
   btn.addEventListener("click", function() {
      let hexColor = "#";
      for (let i = 0; i &lt; 6; i++) {
          hexColor += hex[getRandomNumber()];
      }
      color.textContent = hexColor;
      document.body.style.backgroundColor = hexColor;
   });
  
   function getRandomNumber() {
      return Math.floor(Math.random() * hex.length);
   }
  
   function myFunction() {
      let copyText = document.getElementById("color-code");
      console.log("copytext" + copyText);
      copyText.select();
      navigator.clipboard.write(copyText.value);
      alert("Copied the text: " + copyText.value);
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section class="hero  is-large"&gt;
       &lt;div class="hero-body"&gt;
           &lt;div class="container has-text-centered"&gt;
               &lt;div class="columns is-mobile"&gt;
                   &lt;div class="column is-half is-offset-one-quarter"&gt;
                       &lt;div class="card"&gt;
                           &lt;div class="card-header field is-grouped"&gt;
                               &lt;h3 class="card-header-title is-inline"&gt;
                                   &lt;span&gt; Background Color &lt;span class="tag is-large  is-pulled-right color" id="color-code"&gt;hexcode &lt;/span&gt;
                                   &lt;/span&gt;
                               &lt;/h3&gt;
                               &lt;button class="button p-4 m-4" id="copyColorHex" onclick="myFunction()"&gt;
                                   &lt;span class="icon is-small is-right"&gt;
                                       &lt;svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 " fill="none" viewBox="0 0 24 24" stroke="currentColor"&gt;
                                           &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /&gt;
                                       &lt;/svg&gt;
                                   &lt;/span&gt;
                               &lt;/button&gt;
                           &lt;/div&gt;
                       &lt;/div&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="container has-text-centered"&gt;
               &lt;div class="p-5 "&gt;
                   &lt;button class="button " id="button"&gt;click me&lt;/button&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>