为什么我的输入值[object HTMLInputElement]？

Question

我不明白为什么它不打印出我的<input type="text">的价值？

$('#x').click(function() { 
    var firstname = $("#student_firstname").val(); 
    var lastname = $("#student_lastname").val(); 

    $("ul").after('<li style="display:list-item; padding:5px; border:2px solid black" name="c[]"><strong>First Name</strong> ' + student_firstname + ', <strong>Last Name</strong> ' + student_lastname + '</li>'); 
}); 

Answer 1

您的问题的原因是因为你的变量命名为firstname和lastname，不student_firstname和student_lastname。当你使用这些名字时，Javascript会用这些id属性检索元素并返回它们。在这种情况下，它们是HTMLInputElements，当强制转换为字符串时，会提供您看到的输出。

另请注意，您应该使用append()而不是after()将li添加到ul。

这是你的代码的工作版本：

$('#x').click(function() { 
    var firstname = $("#student_firstname").val(); 
    var lastname = $("#student_lastname").val(); 

    $("ul").append('<li style="display:list-item; padding:5px; border:2px solid black" name="c[]"><strong>First Name</strong> ' + firstname + ', <strong>Last Name</strong > ' + lastname + ' </li>'); 
}); 

Working example