title: Javascript: Assigning User Input as a Variable
body: <p>I'm just learning HTML, CSS, and Javascript and having a tough time grasping the JS. I've been working on this simple issue now for literally 6 hours. I've checked plenty of posts on SO, W3, re-read relevant chapters in Jon Duckett's book, and tried every combination I could think of in the code. </p>
  
  <p>What I need to do is take a username from an input field  and run it through a function to change it in some way. I've seen other's posts with similar questions but haven't been able to create a solution yet. The issue that keeps happening is that when I place what should be the user input back to the page it uses the actual words <code>name.toUpperCase()</code> rather than the value I've given the variable <code>name</code>. I tried converting the name to uppercase in its own statement and then assigning that a variable, but that didn't work either. It seems like my js is never giving "name" a value to begin with.</p>
  
  <p>JS: </p>
  
  <pre><code>var name = document.getElementById('nameEntry');
  var compliment = document.getElementById('compliment');
  var input = document.getElementById('submitjs');
  
  input.onclick = transformName;
  
  function transformName () {
      var elcompliment = document.getElementById('compliment');
      elcompliment.textContent = 'name.toUpperCase( )' + ' YOU ROCK!';
  };
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="jsform"&gt;
      &lt;h2&gt; Enter your name and see it change!&lt;/h2&gt;
      &lt;input type="text" name="nameEntry" id="nameEntry" /&gt;
      &lt;input type="submit" name="submitjs" value="submit" id="submitjs"/&gt;
  
     &lt;div&gt;
      &lt;p id="compliment"&gt;Great Job!&lt;/p&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>