JavaScript obtiene elemento por nombre

127

Considere esta función:

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

  alert (acc);
}

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

Se muestra el cuadro de alerta, pero muestra "indefinido".

javascript html dom Juliver Galleto
fuente
Si puede cambiarlo por completo, recomendaría agregar un campo "id" a sus dos campos de entrada y usar document.getElementById, que devuelve exactamente un valor.
Odi
44
mejor aún: var inputs = document.getElementsByTagName('input')devuelve una lista de nodos, de la que puede extraer ambos elementos de la siguiente manera: var pass = inputs.item ('pass'). Solo un consejo, esto puede acelerar las cosas si se trata de un DOM grande, ya getElementByIdque buscará en todo el árbol cada vez, mientras que una lista de nodos no lo hará, por lo que es más rápido ...
Elias Van Ootegem
Pequeño código lindo, de hecho XD
Guillermo Gutiérrez

Respuestas:

246

La razón por la que ve ese error es porque document.getElementsByNamedevuelve un NodeListelemento. Y a NodeListde elementos no tiene una .valuepropiedad.

Use esto en su lugar:

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

Tenga en cuenta el plural en este método:

document.getElementsByName()

Eso devuelve una serie de elementos, así que use [0] para obtener la primera ocurrencia, por ejemplo

document.getElementsByName()[0]
Ozzy
fuente
8
No es una matriz, es una NodeList :-)
Florian Margaine
1
@FlorianMargaine - En realidad es una colección HTMLC ;)
j08691
1
@ j08691 nop :) pero puede ser fácil confundirse: p
Florian Margaine
¿Cuál es la definición de una matriz y cómo es diferente? Una NodeList es solo un objeto envuelto alrededor de una serie de elementos HTMLE con algunos métodos convenientes. De todos modos, para ponerlo en términos simples para el OP, dije una matriz.
Ozzy
1
Una matriz tiene muchos más métodos que una NodeList. Un NodeList tiene algunos métodos / propiedades de las matrices como la lengthpropiedad, sino que también se está perdiendo una gran cantidad de métodos, tales como map, forEach, etc. Lo que explica por qué tenemos que utilizar: Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine
11

Tu quieres esto:

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

    alert (acc);
}
Elliot Bonneville
fuente
Gracias por usar el ejemplo del OP en su respuesta.
Kris Boyd
@KrisBoyd, la diferencia es que obtengo el primer elemento de la matriz devuelto por getElementsByName. Tal vez debería haberlo dejado más claro, siéntase libre de editar si lo desea.
Elliot Bonneville
Te estaba dando un complemento :) ninguna de las respuestas más altas lo formaron en el mismo formato en el OP
Kris Boyd
6

El método document.getElementsByName devuelve una matriz de elementos. Debe seleccionar primero, por ejemplo.

document.getElementsByName('acc')[0].value
dalazx
fuente
44
No es una matriz, es una NodeList :-)
Florian Margaine
5 
document.getElementsByName("myInput")[0].value;
Sam Battat
fuente
1
Para ser claros: esto es obtener un elemento de una NodeList. :)
Christian Neverdal