JavaScript ottiene l'elemento per nome


127

Considera questa funzione:

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

  alert (acc);
}

E questa parte 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>

Viene visualizzata la finestra di avviso, ma mostra "non definito".


Se è possibile modificarlo del tutto, consiglierei di aggiungere un campo "id" ai due campi di input e utilizzarlo document.getElementById, che restituisce esattamente un valore.
Odi,

4
meglio ancora var inputs = document.getElementsByTagName('input'):, restituisce una lista dei nomi, da cui è possibile estrarre entrambi gli elementi in questo modo: var pass = input.item ('pass'). Solo un suggerimento, questo può accelerare le cose se hai a che fare con un DOM grande, come getElementByIdogni volta cercherà l'intero albero, mentre un nodelist non lo farà, quindi è più veloce ...
Elias Van Ootegem

Piccolo codice davvero carino XD
Guillermo Gutiérrez,

Risposte:


246

Il motivo per cui vedi questo errore è perché document.getElementsByNamerestituisce a NodeListof elements. E a NodeListdi elementi non ha una .valueproprietà.

Usa questo invece:

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

30

Nota il plurale in questo metodo:

document.getElementsByName()

Ciò restituisce una matrice di elementi, quindi usa [0] per ottenere la prima occorrenza, ad es

document.getElementsByName()[0]

8
Non è un array, è un NodeList :-)
Florian Margaine,

1
@FlorianMargaine - In realtà è un HTMLCollection ;)
j08691

1
@ j08691 no :) ma può essere facile essere confuso: p
Florian Margaine

Qual è la definizione di un array e come è diverso? Una NodeList è solo un oggetto racchiuso in una matrice di HTMLElements con alcuni metodi di praticità. Comunque, per dirla in parole povere per l'OP, ho detto un array.
Ozzy,

1
Un array ha molti più metodi di un NodeList. Un NodeList prende alcuni metodi / oggetti di array come la lengthproprietà, ma è anche manca un sacco di metodi, ad esempio map, forEache così via Il che spiega il motivo per cui abbiamo bisogno di usare: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine,

11

Tu vuoi questo:

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

    alert (acc);
}

Grazie per aver usato l'esempio del PO nella tua risposta.
Kris Boyd,

@KrisBoyd, la differenza è che sto ottenendo il primo elemento dall'array restituito da getElementsByName. Forse avrei dovuto renderlo più chiaro: se vuoi, sentiti libero di modificarlo.
Elliot Bonneville,

Ti stavo dando un complemento :) nessuna delle risposte più alte lo forma nello stesso formato all'OP
Kris Boyd,

6

Il metodo document.getElementsByName restituisce una matrice di elementi. Dovresti prima selezionare, per esempio.

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

4
Non è un array, è un NodeList :-)
Florian Margaine,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.