입력 값이 [object HTMLInputElement] 인 이유는 무엇입니까?

Question

내 <input type="text">의 값이 인쇄되지 않는 이유를 알 수 없습니까? 당신의 변수가 firstname 및 lastname하지 student_firstname 및 student_lastname 이름 때문에

$('#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

문제의 원인입니다. 이러한 이름을 사용하면 Javascript는 해당 속성이있는 id 요소를 검색하여 반환합니다. 이 경우 HTMLInputElements이고 문자열로 강제 변환하면 표시되는 출력을 제공합니다.

이 아닌 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