title: How to show innerHTML of texarea after deleting existing content
body: <p>I am trying to hide and show the innerHTML of a textarea based on focus and blur. Its working well. But an issue is, when i delete the entered text the inside innerHTML is already there in the element but its not showing. Following is the issue replication steps:</p>
  <ol>
  <li>Enter text inside the textarea</li>
  <li>Select all the text and delete it</li>
  <li>Then mouseout from the textarea</li>
  <li>The innerHTML is not visible there in the browser</li>
  <li>But innerHTML is visible in the elements when i check with browser inspect element</li>
  </ol>
  <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>let textarea = document.querySelectorAll("textarea");
  
  for (i = 0; i &lt; textarea.length; i++) {
    let innertext = textarea[i].innerHTML;
  
    textarea[i].addEventListener("focus", (e) =&gt; {
      e.target.innerHTML = "";
    })
  
    textarea[i].addEventListener("blur", (e) =&gt; {
      e.target.innerHTML = innertext;
    })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea name="" id="" cols="30" rows="10"&gt;Test&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>