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

Вы также можете использовать 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 с указанным значением. Будьте осторожны, чтобы не использовать ту же строку, что и имя и идентификатор.

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>