0

Necesito acceder al valor de mas de 10 inputs de un Html, pero no quiero declarar tantas variables en mi archivo JS.

En pocas palabras quiciera resumir este codigo:

const $dato1 = document.querySelector('#dato1');
const $dato2 = document.querySelector('#dato2');
const $dato3 = document.querySelector('#dato3');
const $dato4 = document.querySelector('#dato4');
const $dato5 = document.querySelector('#dato5');
const $dato6 = document.querySelector('#dato6');
const $dato7 = document.querySelector('#dato7');
const $dato8 = document.querySelector('#dato8');

2
  • 4
    Puedes darle la misma clase a todos y usar querySelectorAll
    – A. Cedano
    Commented el 18 ene. 2022 a las 16:35
  • A. Cedano te ha dado una buena solución, pero me pregunto si eso es para rellenar un formulario, y porque luego tienes que acceder a todos y cada uno de ellos. Si es para pasarlo a una peticion ajax tienes otros métodos que no necesitan recopilar los datos uno a uno previamente, sino de forma conjunta. Mira que no estes exponiendo un problema XY y si es así agrega a la pregunta algo más de código y lo que realmente pretendes hacer con el.
    – masterguru
    Commented el 18 ene. 2022 a las 16:40

1 respuesta 1

0

Para alcanzar varios elementos a la vez, puedes usar querySelectorAll(). Puedes seleccionar según varios criterios, como clase CSS, tipo de elemento, estado del elemento, etc. Luego, puedes usar esa selección para asignar listeners o lo que sea.

Veamos un ejemplo donde se seleccionan en un formulario sólo los input que tenga la clase form1 y luego se le asigna un listener para escuchar los cambios de esos input.

var allFormOne = document.querySelectorAll('.form1');

allFormOne.forEach(element => {
  element.addEventListener('change', function(e) {
    console.log(`Ha cambiado el input ${e.target.id} \nTu sueldo se multiplicará por: ${e.target.value}`);

  });
});
<p>Cambia el valor de algún input y puede que te lleves una sorpresa, o puede que no, depende...</p>
<form>
  <input class="form1" id="dato1" value="1" />
  <input class="form1" id="dato2" value="2" />
  <input class="form1" id="dato3" value="3" />
  <input id="dato4" value="Este no" />

</form>

Como ya comentó algún compañero, si es para recoger datos de un formulario, existen otras APIs más específicas, como FormData.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.