通過使用名稱而不是javascript中的ID獲取輸入類型文本的值

Question

對於<input type="text" id="vegs" name="fruits"> ，可以使用document.getElementbyId('vegs').value來獲取文本框的輸入。
但是，有沒有一種方法可以使用<input>標記的name屬性來獲取輸入？
document.getElementsbyName('fruits').value似乎不起作用。

Answer 1

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> 

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 =水果的元素的數組。 [0]返回第一個元素，在您的情況下，這是唯一具有name = fruits的元素。

Answer 4

您也可以使用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> 

使用getElementsByName時，請注意IE10及以下行為。

getElementsByName方法在IE10及以下版本中的工作方式有所不同。 在那里，getElementsByName（）還返回具有具有指定值的id屬性的元素。 注意不要將名稱和ID都使用相同的字符串。