JavaScript isme göre öğe al


127

Bu işlevi düşünün:

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

  alert (acc);
}

Ve bu HTML bölümü:

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

Uyarı kutusu görünüyor, ancak "tanımsız" gösteriyor.


Tamamen değiştirebiliyorsanız, iki giriş alanınıza bir alan "id" eklemenizi ve document.getElementByIdtam olarak bir değer döndüren kullanmanızı öneririm .
Odi

4
daha da iyisi:, var inputs = document.getElementsByTagName('input')her iki öğeyi de şu şekilde çıkarabileceğiniz bir nodelist döndürür: var pass = inputs.item ('pass'). Büyük bir DOM ile konum uğraşan yanı ise sadece bir ipucu, bu kutu hız şeyler kadar getElementByIdo ... hızlıdır, bu yüzden her zaman tüm ağaç aramak, bir nodelist oysa olacak olmayacak
Elias Van Ootegem

Küçük şirin kod gerçekten XD
Guillermo Gutiérrez

Yanıtlar:


246

Bu hatayı görmenizin nedeni document.getElementsByName, bir NodeListöğe döndürmesidir . Ve a NodeListelemanlarının bir .valueözelliği yoktur.

Bunun yerine şunu kullanın:

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

30

Bu yöntemde çoğul olana dikkat edin:

document.getElementsByName()

Bu, bir öğe dizisi döndürür, bu nedenle ilk geçtiği yeri elde etmek için [0] kullanın, ör.

document.getElementsByName()[0]

8
Bu bir dizi değil, bir NodeList :-)
Florian Margaine

1
@FlorianMargaine - Aslında bir HTMLCollection ;)
j08691

1
@ j08691 hayır :) ama kafası karışmak kolay olabilir: p
Florian Margaine

Bir dizinin tanımı nedir ve bu nasıl farklıdır? Bir NodeList, birkaç kullanışlı yöntemle bir dizi HTMLElement etrafına sarılmış bir nesnedir. Her neyse, OP için meslekten olmayanların terimleriyle söylemek gerekirse, bir dizi dedim.
Ozzy

1
Bir dizinin NodeList'ten çok daha fazla yöntemi vardır. Bir NodeList gibi dizilerden bazı yöntemler / özelliklerini alır lengthmülkiyet, ama aynı zamanda eksik bir sürü gibi yöntemlerinin map, forEachbiz kullanımına neden ihtiyaç vb açıklıyor: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine

11

Bunu istiyorsun:

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

    alert (acc);
}

Cevabınızda OP örneğini kullandığınız için teşekkür ederiz.
Kris Boyd

@KrisBoyd, fark şu ki, döndürülen diziden ilk elemanı alıyorum getElementsByName. Belki bunu daha açık hale getirmeliydim - isterseniz düzenlemekten çekinmeyin.
Elliot Bonneville

Size bir tamamlayıcı vermiştim :) OP'de aynı formatta olan yüksek cevapların hiçbiri
Kris Boyd

6

Yöntem document.getElementsByName bir dizi öğe döndürür. Örneğin önce seçmelisiniz.

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

4
Bu bir dizi değil, bir NodeList :-)
Florian Margaine

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.