JavaScript รับองค์ประกอบตามชื่อ

พิจารณาฟังก์ชันนี้:

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

และส่วน HTML นี้:

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

กล่องการแจ้งเตือนกำลังแสดง แต่จะแสดง "ไม่ได้กำหนด"

สาเหตุที่คุณเห็นข้อผิดพลาดนั้นเป็นเพราะdocument.getElementsByNameส่งคืนNodeListองค์ประกอบ และNodeListองค์ประกอบหนึ่งไม่มี.valueคุณสมบัติ

ใช้สิ่งนี้แทน:

document.getElementsByName("acc")[0].value

สังเกตพหูพจน์ในวิธีนี้:

document.getElementsByName()

ที่ส่งคืนอาร์เรย์ขององค์ประกอบดังนั้นให้ใช้ [0] เพื่อรับการเกิดครั้งแรกเช่น

document.getElementsByName()[0]

คุณต้องการสิ่งนี้:

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}

เมธอด document.getElementsByName ส่งคืนอาร์เรย์ขององค์ประกอบ คุณควรเลือกก่อนเช่น

document.getElementsByName('acc')[0].value

document.getElementsByName("myInput")[0].value;