title: Javascript Clipboard API with promises
body: <p>I got text in clipboard:</p>
  
  <pre><code>&lt;img class="imgclass" src="path_to_file/file.png"&gt;
  </code></pre>
  
  <p>When I run this code:</p>
  
  <pre><code>&lt;div id="data_from_clipboard"&gt;&lt;/div&gt;
  &lt;button id="btn-convert" onClick="convert_from_clipboard()"&gt;Convert&lt;/button&gt;
  
  &lt;div id="image"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      function convert_from_clipboard(){
          navigator.clipboard.readText()
              /*Alert for accepting access to clipboard appears, user accepts*/
          .then(text =&gt; {document.getElementById("data_from_clipboard").innerHTML = text;})
              /*Code from clipbard appears here, img is visible inside this div*/
          .then(imgsrc = document.getElementsByClassName('imgclass')[0].src)
              /*Error: "Cannot read property 'src' of undefined" pointing to above line of code*/
          .then(document.getElementById("image").innerHTML = '&lt;img src="' + imgsrc + '"&gt;')
          ;}
  &lt;script&gt;
  </code></pre>
  
  <p>Looks like error appears because code is running even when user doesn't click "Accept" for reading from clipboard yet. Clipboard API is asynchronous, so I know I should do this with promises, but don't know, how. Can somebody point me into right direction?</p>