JavaScript mendapatkan elemen berdasarkan nama


127

Pertimbangkan fungsi ini:

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

  alert (acc);
}

Dan bagian HTML ini:

<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>

Kotak peringatan ditampilkan, tetapi menunjukkan "tidak terdefinisi".


Jika Anda dapat mengubahnya sama sekali, saya akan merekomendasikan menambahkan "id" bidang ke dua bidang input Anda, dan gunakan document.getElementById, yang mengembalikan tepat satu nilai.
Odi

4
lebih baik lagi var inputs = document.getElementsByTagName('input'):, mengembalikan nodelist, dari mana Anda dapat mengekstrak kedua elemen seperti: var pass = inputs.item ('pass'). Hanya sebuah tip, ini dapat mempercepat jika Anda berurusan dengan DOM besar, karena getElementByIdakan mencari seluruh pohon setiap kali, sedangkan seorang ahli nodal tidak akan, jadi lebih cepat ...
Elias Van Ootegem

Kode kecil yang lucu memang XD
Guillermo Gutiérrez

Jawaban:


246

Alasan Anda melihat kesalahan itu adalah karena document.getElementsByNamemengembalikan NodeListelemen. Dan NodeListelemen tidak memiliki .valueproperti.

Gunakan ini sebagai gantinya:

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

30

Perhatikan bentuk jamak dalam metode ini:

document.getElementsByName()

Itu mengembalikan array elemen, jadi gunakan [0] untuk mendapatkan kejadian pertama, misalnya

document.getElementsByName()[0]

8
Ini bukan array, ini NodeList :-)
Florian Margaine

1
@FlorianMargaine - Sebenarnya ini HTMLCollection ;)
j08691

1
@ j08691 nggak :) tapi bisa mudah dikacaukan: p
Florian Margaine

Apa definisi dari array dan bagaimana bedanya? NodeList hanyalah sebuah objek yang melilit array HTMLElements dengan beberapa metode kenyamanan. Bagaimanapun, untuk memasukkannya ke dalam istilah awam untuk OP, saya katakan sebuah array.
Ozzy

1
Array memiliki lebih banyak metode daripada NodeList. Sebuah NodeList mengambil beberapa metode / properti dari array seperti lengthproperti, tapi itu juga hilang banyak metode, seperti map, forEach, dll yang menjelaskan mengapa kita perlu menggunakan: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine

11

Kamu mau ini:

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

    alert (acc);
}

Terima kasih telah menggunakan contoh OP dalam jawaban Anda.
Kris Boyd

@ KrisBoyd, perbedaannya adalah saya mendapatkan elemen pertama dari array yang dikembalikan oleh getElementsByName. Mungkin saya harus membuatnya lebih jelas - silakan mengedit jika Anda mau.
Elliot Bonneville

Saya memberi Anda pelengkap :) tidak ada jawaban yang lebih tinggi dari itu dalam format yang sama di OP
Kris Boyd

6

Metode document.getElementsByName mengembalikan array elemen. Anda harus memilih dulu, misalnya.

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

4
Ini bukan array, ini NodeList :-)
Florian Margaine

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.