JavaScript obtenir l'élément par nom

127

Considérez cette fonction:

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

  alert (acc);
}

Et cette partie 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>

La boîte d'alerte s'affiche, mais elle indique «indéfini».

Juliver Galleto
la source
Si vous pouvez le changer complètement, je recommanderais d'ajouter un champ «id» à vos deux champs d'entrée, et d'utiliser document.getElementById, qui renvoie exactement une valeur.
Odi
4
mieux encore var inputs = document.getElementsByTagName('input'):, renvoie une liste de nœuds, à partir de laquelle vous pouvez extraire les deux éléments comme ceci: var pass = inputs.item ('pass'). Juste un conseil, cela peut accélérer les choses si vous avez affaire à un gros DOM, tout comme la getElementByIdrecherche de l'arbre entier à chaque fois, alors qu'une liste de nœuds ne le fera pas, donc c'est plus rapide ...
Elias Van Ootegem
Little cute code en effet XD
Guillermo Gutiérrez

Réponses:

246

La raison pour laquelle vous voyez cette erreur est que document.getElementsByNamerenvoie un NodeListélément. Et un NodeListdes éléments n'a pas de .valuepropriété.

Utilisez plutôt ceci:

document.getElementsByName("acc")[0].value
Aidanc
la source
30

Notez le pluriel dans cette méthode:

document.getElementsByName()

Cela renvoie un tableau d'éléments, utilisez donc [0] pour obtenir la première occurrence, par exemple

document.getElementsByName()[0]
Ozzy
la source
8
Ce n'est pas un tableau, c'est une NodeList :-)
Florian Margaine
1
@FlorianMargaine - En fait, c'est une HTMLCollection ;)
j08691
1
@ j08691 Nope :) mais il peut être facile de confondre: p
Florian Margaine
Quelle est la définition d'un tableau et en quoi est-ce différent? Une NodeList est juste un objet enroulé autour d'un tableau de HTMLElements avec quelques méthodes pratiques. Quoi qu'il en soit, pour le dire en termes simples pour l'OP, j'ai dit un tableau.
Ozzy
1
Un tableau a beaucoup plus de méthodes qu'une NodeList. Une NodeList prend des méthodes / propriétés de tableaux tels que la lengthpropriété, mais il manque aussi beaucoup de méthodes, telles que map, forEach, etc. Ce qui explique pourquoi nous devons utiliser: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine
11

Tu veux ça:

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

    alert (acc);
}
Elliot Bonneville
la source
Merci d'utiliser l'exemple du PO dans votre réponse.
Kris Boyd
@KrisBoyd, la différence est que j'obtiens le premier élément du tableau renvoyé par getElementsByName. J'aurais peut-être dû clarifier cela - n'hésitez pas à modifier si vous le souhaitez.
Elliot Bonneville
Je vous donnais un complément :) aucune des réponses les plus élevées ne le forme dans le même format à l'OP
Kris Boyd
6

La méthode document.getElementsByName renvoie un tableau d'éléments. Vous devez d'abord sélectionner, par exemple.

document.getElementsByName('acc')[0].value
Dalazx
la source
4
Ce n'est pas un tableau, c'est une NodeList :-)
Florian Margaine
5
document.getElementsByName("myInput")[0].value;
Sam Battat
la source
1
Juste pour être clair: il s'agit d'extraire un élément d'une NodeList. :)
Christian Neverdal