title: Issue with reading and writing a name
body: <p>I am just learning js and have the following issue that I cannot seem to resolve.  The object of the exercise is to read in the name when the button is clicked and then display a message that says "hello "</p>
  
  <p>All of the functions are contained within the mainC div.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Sentence Diagrammer&lt;/title&gt;
      &lt;link rel="stylesheet" href="./css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Welcome to the Sentence Diagrammer!&lt;/h1&gt;
      &lt;h2&gt;You can practice your diagramming skills here.&lt;/h2&gt;
      &lt;div id="container"&gt;
          &lt;div id="mainL"&gt;
              &lt;h1&gt;Left Conatainer&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div id="mainC"&gt;
              &lt;h1&gt;This is the center&lt;/h1&gt;
              &lt;p&gt;Please tell us your name&lt;/p&gt;
  
              &lt;p&gt;I am &lt;input id="theName" name="aName" type="text" /&gt;&lt;/p&gt;
              &lt;button onclick="validName()"&gt;Click&lt;/button&gt;
              &lt;p id="demo"&gt;&lt;/p&gt;
  
              &lt;input id="slide" type="range" min="1" max="10" step="1" onchange="displayPrelimQ(this.value)" /&gt;
              &lt;span id="slideValue"&gt;1&lt;/span&gt;
  
              &lt;script type="text/javascript"&gt;
                  function validName() {
                      var text1 = "hello";
                      var text2 = document.getElementById("theName").innerHTML;
                      document.getElementById("demo").innerHTML = text1 + text2;
  
                  }
              &lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
                  function displayPrelimQ(val) {
                      document.getElementById("slideValue").innerHTML = val;
  
                  }
              &lt;/script&gt;
          &lt;/div&gt;
  
          &lt;div id="mainR"&gt;
              &lt;h1&gt;right container&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>