Aunque existen formas de accederlos, mi respuesta no es cómo lograrlo sino:
No le pongas el mismo ID a distintos elementos dentro del HTML.
El id debe ser único
Según la documentación del atributo id de las etiquetas HTML:
The id
attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id
attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
El resaltado es mío y mi traducción libre sería:
El atributo id
especifica un identificador único para un elemento HTML (el valor debe ser único dentro del documento HTML).
El atributo id
es utilizado principalmente para apuntar un estilo en una hoja de estilos y en JavaScript (a través del DOM HTML) para manipular el elemento con un id
específico.
Tener elementos con ID's duplicados, triplicados, etc. invalida tu HTML y cualquier herramienta de validación te va a decir que un documento es inválido si repites elementos con un mismo id
, por ejemplo el servicio de validación HTML de la w3c
Esta es la razón por la cual el método getElementById()
devuelve un único elemento (generalmente el primero que encuentra en el DOM) y no un arreglo de elementos, como explica su documentación:
The getElementById()
method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.
El resaltado es mío y mi traducción libre sería:
El método getElementById()
de la interface Document retorna un objeto Element que representa el elemento cuya propiedad id
coincide con la cadena especificada. Dado que los IDs de los elementos tienen que ser únicos, si se especifican, resultan una vía útil para obtener acceso rápido a un elemento específico.
La solución real a tu problema es poner ID's únicos a los distintos elementos, por ejemplo:
function getValues() {
console.log(document.getElementById("valor1").value);
console.log(document.getElementById("valor2").value);
console.log(document.getElementById("valor3").value);
}
<label for="valor1">Valor1</label> <input type="text" id="valor1" value="a"/><br>
<label for="valor2">Valor2</label> <input type="text" id="valor2" value="b"/><br>
<label for="valor3">Valor3</label> <input type="text" id="valor3" value="c"/><br><br>
<button onclick="getValues()">Obtener valores</button>
El ejemplo está en un snippet para que puedas probarlo aquí mismo en el navegador haciendo clic en Ejecutar.