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