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属性で名前フィールドを探しています。

代わり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>