title: Undefined in a textarea
body: <p>The following code is to do the following: </p>
  
  <p>First, create a div class=words, and then a hidden textarea with id txtarea and a button with class btn2.  What I want to happen is:</p>
  
  <p>The page opens with the a paragraph in div words which will fade out, leaving the hidden textarea and button to appear.  The user is to then input text in the textarea, press the button, and the textarea and button disappear and are replaced with the div words, now with text entered by the user from the textarea.</p>
  
  <p>Everything works well until the paragraph fades out.  What I get then is the textarea with the word "undefined".  If I type in any text and hit the botton, as expected the textarea disappears, along with the button, but "undefined " remains.  Note that the settimeout was included since I kept getting the javascript to start before the paragraph loaded, even though I thought the $document.ready function was to prevent that.  Thanks in advance.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; this is the title&lt;/title&gt;
  &lt;style&gt;
      p {
          font-family: "Times New Roman",TImes, serif;
      }
      pre{
          white-space:pre-wrap;font-family: "Times New Roman",TImes, serif
      }
      .words {
          position:absolute;width:auto;height:auto;top:260px;left:265px;right:225px;text-align:center;color:black;
          font-size: 60px;
      }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
          setTimeout(function(){
              $("p").fadeOut();
              $("#newtext").fadeIn();
              var area = document.getElementById("newtext");
              str = area.value
              $('.words').html("&lt;pre&gt;" + str + "&lt;/pre&gt;")
              $(".btn2").click(function(){
                  $("#newtext").fadeOut()
              });
          },5000);
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class ="words"&gt;
          &lt;p&gt; When this fades out, enter text.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="newtext" style="display:none" &gt;
          &lt;textarea rows="50" cols="200" id = "txtArea"  &gt; &lt;/textarea&gt;
          &lt;button class="btn2"&gt;SEE YOUR TEXT&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>