.text() возвращает объект Object

Question

Итак, я создал простой список покупок/приложение для работы. Он почти завершен, за исключением одной проблемы с nagging: .text() продолжает возвращать [object Object] вместо введенного входа.

Я не понимаю, что я делаю неправильно. Для того, чтобы показать, что я говорю о том, я включил мой JS скрипт:

$(document).ready(function() { 

    addItem(); 
    deleteAction(); 
    doneAction(); 
}); 

function addItem() { 

    $("button").click(function() { 
    var value = $(".input-form").val();  
     $("ul").append('<li> <span class=\"item-name\">'+value+'</span><span class=\"done\"> done</span><span class=\"delete\"> delete</span></li>'); 
     $(".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"); 
    }); 
} 

Вот мой полный код на CodePen: http://codepen.io/barackobama/pen/qOrKBp

Answer 1

.name не отображаются значения, добавляется к DOM когда .text() вызывается в $(".name").text(value) в строковом аргументе к. append()?

Попробуйте установить value в строке аргумента .append() с использованием оператора +, например <span class=\"name\">'+value; перемещение value объявление переменной в пределах click событие для его определения, установки на событие; js на начальной codepen установить value когда addItem() первоначально назывались в .ready(), если значения еще не установлено пользователем

function addItem() {   
    $("button").click(function() { 
     var value = $(".input-form").val(); 
     $("ul").append('<li> <span class=\"name\">'+value 
      +'</span><span class=\"done\"> done</span>' 
      +'<span class=\"delete\"> delete</span></li>'); 
     $(".input-form").val(''); 
    }); 
} 

codepen http://codepen.io/anon/pen/NGpBBX

Answer 2

Ответ с учетом вы можете использовать более одной форму въездного разбора весь formcontent в список ключ-значение-пара для легкого доступа к нему.

function addItem() { 
    $("button").click(function() { 
     var data = $('.input-form').serializeArray().reduce(function(obj,item) {     
       obj[item.name] = item.value; 
       return obj; 
       }, {}); 
     $("ul").append('<li> <span class=\"name\"></span>'+data['additem']+ 
        '<span class=\"done\"> done</span><span class=\"delete\"> delete</span></li>'); 
     $(".input-form").val(''); 
    }); 
}