title: How to use buttons to keep adding text in HTML JavaScript?
body: <p>I need to create a web page that displays 10 buttons (0-9). When, for example, the button number 4 is clicked, the web page should display the following message under the buttons: ​</p>
  <pre><code>You have entered four
  </code></pre>
  <p>When, for example, the button number 9 is clicked next, the message will become: ​</p>
  <pre><code>You have entered four-nine
  </code></pre>
  <p>This process continues.</p>
  <p>Here is what I have so far. I have been able to display each number individually, but cannot figure out how to continue adding numbers to the display once they've been clicked.</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 number0(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "zero";
  }
  
  function number1(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "one";
  }
  
  function number2(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "two";
  }
  
  function number3(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "three";
  }
  
  function number4(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "four";
  }
  
  function number5(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "five";
  }
  
  function number6(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "six";
  }
  
  function number7(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "seven";
  }
  
  function number8(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "eight";
  }
  
  function number9(){
    var displaySpan = document.getElementById("display");
  
    displaySpan.innerHTML = "nine";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="number0()"&gt;0&lt;/button&gt;
  &lt;button onclick="number1()"&gt;1&lt;/button&gt;
  &lt;button onclick="number2()"&gt;2&lt;/button&gt;
  &lt;button onclick="number3()"&gt;3&lt;/button&gt;
  &lt;button onclick="number4()"&gt;4&lt;/button&gt;
  &lt;button onclick="number5()"&gt;5&lt;/button&gt;
  &lt;button onclick="number6()"&gt;6&lt;/button&gt;
  &lt;button onclick="number7()"&gt;7&lt;/button&gt;
  &lt;button onclick="number8()"&gt;8&lt;/button&gt;
  &lt;button onclick="number9()"&gt;9&lt;/button&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  &lt;span id="display"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>