3

Eu estava testando uns códigos e percebi que não estava conseguindo obter o valor de um input através do atributo name document.getElementsByName().value, mas com o id está funcionando normalmente. É possível obter o valor usando name? Se sim como devo fazer?

Através do name

function t() {
  var t1 = document.getElementsByName("01").value;
  var t2 = document.getElementsByName("02");
  
  t2.value = t1;
};
<input type='text' name='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea id='02'></textarea>

Através do id:

function t() {
  var t1 = document.getElementById("01").value;
  var t2 = document.getElementById("02");
  
  t2.value = t1;
};
<input type='text' id='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea id='02'></textarea>

3 Respostas 3

3

O elemento que você quer obter deve ter um atributo name:

<input type='text' id='01' name="campo" value="foo">
                             ↑

Como o método document.getElementsByName retorna um node list (lista de nós), você deve obter um dos elementos da lista através de um índice, que começa com zero ([0]), onde [0] é o primeiro elemento da página, [1] o segundo e assim consecutivamente:

var el = document.getElementsByName("campo");
console.log(el[0].id);
console.log(el[1].id);
<input type='text' id='01' name="campo">
<input type='text' id='02' name="campo">

O document.getElementsByName pode ser útil para usar com radio buttons, já que num grupo deles, cada membro possui o mesmo name:

<p>
  <input type="radio" name="sexo" value="M"> Masculino
</p>
<p>
  <input type="radio" name="sexo" value="F"> Feminino
</p>

Como um id deve ser único na página o, document.getElementById não retorna um node list, apenas o elemento selecionado. Tanto que o nome é no singular (getElement) e não no plural (getElements).

2
  • Então se eu for obter elementos com nomes diferente eu mantenho como [0] para os primeiros? exemplo document.getElementsByName("nome")[0].value e document.getElementsByName("sobrenome")[0].value
    – user117425
    5/08/2018 às 4:59
  • Sim, exatamente. O [0] pega o primeiro com o name especificado.
    – Meu ovo
    5/08/2018 às 5:00
1

Neste código há um erro, no seu HTML, o textarea não tem atributo name, somente o id, setado para "02", mas no seu Javascript você tenta encontra-lo pelo name, realmente nunca vai encontrar. Mas mesmo que corrija este erro, há mais um problema. Como já disseram, a função getElementsByName retorna uma lista de elementos, ou seja, você precisará localizar o elemento que você quer, neste caso, ele está no índice 0, mas se você tiver outro elemento como a mesma propriedade name (da mesma TAG, ou diferente) antes dele, você vai ter um erro, pois o índice 0 não vai ser o elemento que você quer.

O mais interessante é você utilizar as funções nativas document.querySelector ou document.querySelectorAll, pra fazer seleções CSS mais específicas. No seu caso você pode usar document.querySelector('input[name="01"]') ao invés de document.getElementsByName("01"), que vai retornar um NodeElement e você poderá acessar a propriedade value. Essa seleção garante que o resultado vai ser um elemento da TAG input e atributo name="01", coisa que o getElementsByName não faz.

Aqui vai o exemplo corrigido

function t() {
  var t1 = document.querySelector('input[name="01"]');
  var t2 = document.querySelector('textarea[name="02"]');
  
  t2.value = t1.value;
};
<input type='text' name='01'/><br>
<button onclick='t()'>CONFIRMAR</button><br>
<textarea name='02'></textarea>

Lembrando que, se você não quiser especificar a TAG do elemento na seleção CSS, você pode utilizar asterisco, desta forma: '*[name="01"]'. Mais exemplos de seleções CSS você pode ver no W3Scools: CSS Attribute Selectors e CSS Selectors

0

document.getElementsByName retorna um NodeList de elementos, por isso não tem a propriedade .value
Use document.getElementsByName("01")[0].value e t5[0].value

Você deve fazer log-in para responder a esta pergunta.