Elemento get de JavaScript pelo nome

127

Considere esta função:

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

  alert (acc);
}

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

A caixa de alerta está sendo exibida, mas mostra "indefinido".

javascript html dom Juliver Galleto
fonte

Se você puder alterá-lo completamente, recomendo adicionar um campo "id" aos seus dois campos de entrada e use document.getElementById, que retorne exatamente um valor.

Odi

4

melhor ainda var inputs = document.getElementsByTagName('input'):, retorna um nodelist, do qual você pode extrair os dois elementos da seguinte maneira: var pass = inputs.item ('pass'). Apenas uma dica, esta velocidade pode as coisas se você está lidando com um grande DOM, como getElementByIdirá procurar toda a árvore de cada vez, enquanto um nodelist não vai, por isso é mais rápido ...

Elias Van Ootegem

Pouco código bonitinho, de fato, XD

Guillermo Gutiérrez

246

A razão pela qual você está vendo esse erro é porque document.getElementsByNameretorna um NodeListdos elementos. E um NodeListdos elementos não tem uma .valuepropriedade.

Use isso:

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

Aidanc
fonte

30

Observe o plural neste método:

document.getElementsByName()

Isso retorna uma matriz de elementos, então use [0] para obter a primeira ocorrência, por exemplo

document.getElementsByName()[0]

Ozzy
fonte

8

Não é uma matriz, é um NodeList :-)

Florian Margaine

1

@FlorianMargaine - Na verdade, é um HTMLCollection ;)

j08691

1

@ j08691 Nope :) mas pode ser fácil de ser confundido: p

Florian Margaine

Qual é a definição de uma matriz e como isso é diferente? Um NodeList é apenas um objeto envolvido em uma matriz de HTMLElements com alguns métodos de conveniência. Enfim, para colocar nos termos leigos do OP, eu disse uma matriz.

Ozzy

1

Uma matriz possui muito mais métodos que uma NodeList. A NodeList leva alguns métodos / propriedades de matrizes, tais como a lengthpropriedade, mas também está faltando um monte de métodos, tais como map, forEach, etc. O que explica por que precisamos usar: Array.prototype.forEach.call( NodeList, fn ).

Florian Margaine

11

Você quer isso:

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

    alert (acc);
}

Elliot Bonneville
fonte

Obrigado por usar o exemplo do OP em sua resposta.

Kris Boyd

@KrisBoyd, a diferença é que estou recebendo o primeiro elemento da matriz retornada por getElementsByName. Talvez eu devesse ter deixado isso mais claro - fique à vontade para editar, se quiser.

Elliot Bonneville

Eu estava dando-lhe um complemento :) nenhuma das respostas mais elevadas formá-lo no mesmo formato no OP

Kris Boyd

6

O método document.getElementsByName retorna uma matriz de elementos. Você deve selecionar primeiro, por exemplo.

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

dalazx
fonte

4

Não é uma matriz, é um NodeList :-)

Florian Margaine

5

document.getElementsByName("myInput")[0].value;

Sam Battat
fonte

1

Só para ficar claro: isso está obtendo um elemento de um NodeList. :)

Christian Neverdal

Elemento get de JavaScript pelo nome

Respostas: