title: Use Javascript to clear div before printing?
body: <p>I have a script that prints some text when I click a button.</p>
  
  <pre class="lang-js prettyprint-override"><code>function typeWriter(messageToShow, targetElement, timeBetween, currentPos = 0) {
    if (currentPos &lt; messageToShow.length) {
      document.getElementById(targetElement).innerHTML += messageToShow.charAt(currentPos);
      currentPos++;
      setTimeout(function() { typeWriter(messageToShow, targetElement, timeBetween, currentPos); }, timeBetween);
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button type="button" class="btn btn-link" onclick="typeWriter('TEXT HERE' , 'logone', 20)"&gt;Click here&lt;/button&gt;
  
  &lt;p id="logone"&gt;&lt;/p&gt; &lt;br/&gt; 
  </code></pre>
  
  <p>Now I have multiple of these, and in order for it to work, I have them print in separate <code>&lt;p&gt;</code> elements. So they print in different places. Instead of doing that I'd rather have them print the text in the same element. This means that when you click the button it will erase any text that was already there. How can I do this? Let's say the element to display the text is <code>&lt;p id="logone"&gt;</code> in my sample code above?</p>