如何从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>