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

javascript html dom Juliver Galleto
sumber
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
Aidanc
sumber
30

Perhatikan bentuk jamak dalam metode ini:

document.getElementsByName()

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

document.getElementsByName()[0]
Ozzy
sumber
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);
}
Elliot Bonneville
sumber
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
dalazx
sumber
4
Ini bukan array, ini NodeList :-)
Florian Margaine
5 
document.getElementsByName("myInput")[0].value;
Sam Battat
sumber
1
Untuk lebih jelasnya: ini mendapatkan elemen dari NodeList. :)
Christian Neverdal