Получить значение типа ввода текста, используя имя вместо идентификатора в JavaScript

Question

Для <input type="text" id="vegs" name="fruits"> можно использовать document.getElementbyId('vegs').value, чтобы получить ввод текстового поля.
Но есть ли способ получить ввод с помощью атрибута name тега <input>?
document.getElementsbyName('fruits').value не работает.

Answer 1

Вы также можете использовать document.querySelector () .

function show_value() {
  var ret = document.querySelector("input[name='fruits']").value;
  console.log(ret);
}

<input type="text" id="vegs" name="fruits">
<button onclick="show_value()">Click</button>

Будьте осторожны с поведением IE10 и ниже при использовании getElementsByName .

Метод getElementsByName работает по-разному в IE10 и ниже.Там getElementsByName () также возвращает элементы, имеющие атрибут id с указанным значением.Будьте осторожны, чтобы не использовать ту же строку, что и имя и идентификатор.

Answer 2

MDN:

getElementsByName () : метод объекта Document возвращает коллекцию элементов NodeList с заданнымимя в документе

Вы можете получить доступ к первому элементу, используя [0]

function change(){
  console.log(document.getElementsByName('fruits')[0].value)
}

<input type="text" onchange="change()" id="vegs" name="fruits">

Answer 3

это будет делать ..

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

getElementsByName возвращает массив элементов, имеющих name = fruits.[0] возвращает первый элемент, который в вашем случае является единственным элементом, имеющим name = fruits ..

Answer 4

document.getElementsByName возвращает NodeList (как массив), поэтому вам нужно выбрать первый элемент.

Там может быть несколько входов с именем фруктов.Если это так, итерируйте по NodeList так же, как и по массиву.

Я сделал для вас фрагмент:

document.getElementById("button").addEventListener("click", () => {
  console.log(document.getElementsByName("fruits")[0].value);
});

<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>

Если вы хотите использовать несколько входов с одним и тем же именем, вы можете использовать фрагмент ниже.

Используется .forEach() цикл для итерации по массиву fruits (я знаю, что это NodeList, но думаю о нем как о массиве. Он имеет очень похожие функции и сделает жизнь таким образом намного проще).

var fruits;

document.getElementById("button").addEventListener("click", () => {
  fruits = document.getElementsByName("fruits"); //fruits is now a NodeList
  fruits.forEach(element => {
    console.log(element.value);
  });
});

<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>