How to get the value of an input using the attribute name javascript

Question

I was testing some codes and I realized I wasn’t getting the value of a input through the attribute name document.getElementsByName().value, but with the id is working normally. It is possible to get the value using name? If yes how should I do?

Through the 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>

Through the 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>

Answer 1

The element you want to get must have an attribute name:

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

As the method document.getElementsByName returns a Node list (list of nodes), you must get one of the elements of the list through an index, which starts with zero ([0]), where [0] is the first element of the page, [1] the second and so consecutively:

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

The document.getElementsByName can be useful to use with radio Buttons, since in a group of them, each member has the same name:

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

As a id should be unique on page, document.getElementById nay returns a Node list, only the selected element. So much so that the name is in singular (getElement) and not in the plural (getElements).

Answer 2

In this code there is an error, in your HTML, the textarea has no attribute name, only the id, setado to "02", but in your Javascript you try to find it by name, really never will. But even if you fix this error, there is one more problem. As already said, the function getElementsByName returns a list of elements, i.e., you will need to locate the element you want, in this case it is at index 0, but if you have another element as the same property name (of the same TAG, or different) before it, you will get an error because the index 0 will not be the element you want.

The most interesting thing is that you use the native functions Document.querySelector or Document.querySelectorAll, to make more specific CSS selections. In your case you can use document.querySelector('input[name="01"]') instead of document.getElementsByName("01"), that will return a Nodeelement and you will be able to access the property value. This selection ensures that the result will be a TAG element input and attribute name="01", thing that the getElementsByName doesn’t make.

Here is the corrected example

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>

Remember that if you do not want to specify the element TAG in the CSS selection, you can use asterisk in this way: '*[name="01"]'. More examples of CSS selections you can see in W3scools: CSS Attribute Selectors and CSS Selectors

Answer 3

document.getElementsByName returns a Nodelist of elements, so it does not have the property .value
Use document.getElementsByName("01")[0].value and t5[0].value