Как получить значение из текстового поля ввода в javascript?

Question

Я попытался получить имя пользователя и фамилию от пользователя, но я получаю, что я не определил результаты для них обоих.

function getTextField() { 
 
    var fname = document.getElementsByClassName("fname").value; 
 
    var lname = document.getElementsByClassName("lname").value; 
 

 
    var message = fname + "\n" + lname; 
 
    document.getElementsByClassName("get")[0].innerHTML = message; 
 
}

<form name="cost" autocomplete="on"> 
 
    First Name: 
 
    <br> 
 
    <input type="text" name="fname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"> 
 
    <br>Last Name: 
 
    <br> 
 
    <input type="text" name="lname" required placeholder="Enter the last name" pattern="[A-Za-z\-]+" maxlength="25"> 
 
    <br> 
 
    <br> 
 
    <input type="button" onClick="getTextField()" value="Place Order!" /> 
 
    <br> 
 
    <br> <span class="get"></span> 
 
</form>

Answer 1

Вы ищете поля имени по class, а не атрибутом name.

Использование getElementsByName вместо getElementsByClassName

function getTextField() { 
 
    var fname = document.getElementsByName("fname")[0].value; 
 
    var lname = document.getElementsByName("lname")[0].value; 
 

 
    var message = fname + "\n" + lname; 
 
    document.getElementsByClassName("get")[0].innerHTML = message; 
 
}

<form name="cost" autocomplete="on"> 
 
    First Name: 
 
    <br> 
 
    <input type="text" name="fname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"> 
 
    <br>Last Name: 
 
    <br> 
 
    <input type="text" name="lname" required placeholder="Enter the last name" pattern="[A-Za-z\-]+" maxlength="25"> 
 
    <br> 
 
    <br> 
 
    <input type="button" onClick="getTextField()" value="Place Order!" /> 
 
    <br> 
 
    <br> <span class="get"></span> 
 
</form>