title: .text() returns object Object
body: <p>So I've created a simple shopping list / to-do app. It's nearly complete, except for one nagging problem: <code>.text()</code> keeps returning <code>[object Object]</code> instead of the input captured. </p>
  
  <p>I don't understand what I'm doing wrong. To show what I'm talking about, I included my JS script:</p>
  
  <pre><code> $(document).ready(function() {
  
       addItem();
       deleteAction();
       doneAction();
   });
  
   function addItem() {
  
       $("button").click(function() {
       var value = $(".input-form").val();       
           $("ul").append('&lt;li&gt; &lt;span class=\"item-name\"&gt;'+value+'&lt;/span&gt;&lt;span class=\"done\"&gt; done&lt;/span&gt;&lt;span class=\"delete\"&gt; delete&lt;/span&gt;&lt;/li&gt;');
           $(".input-form").val('');
       });
   }
  
   function deleteAction() {
       $(".ul-list").on("click", ".delete", function() {
        //   alert("Delete event fired.");
           $(this).closest("li").remove();
       });
   }
  
   function doneAction() {
       $(".ul-list").on("click", ".done", function() {
        //   alert("Done event fired.")
           $(this).closest("li").toggleClass("strike");
       });
   }
  </code></pre>
  
  <p>Here's my full code on CodePen: <a href="http://codepen.io/barackobama/pen/qOrKBp" rel="nofollow">http://codepen.io/barackobama/pen/qOrKBp</a></p>