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


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

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]

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);
}

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

44
No es una matriz, es una NodeList :-)
Florian Margaine

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.