Si se va a tratar de una cantidad ilimitada de elementos, entonces no sería necesario un bucle ya que en algún momento tiene que detenerse. Lo recomendable sería que crees una función en la cual se genere y adhiera el nuevo para de elementos al documento, proceso que podría realizarse al pulsar un botón. Por otro lado, para leer los datos de todos los campos creados, puedes utilizar el método
.querySelectorAll()
con el cual puedes tomar de uno a más elementos, en conjunto con un selector avanzado de CSS, por ejemplo, uno que seleccione elementos cuyo nombre empiece por un patrón, digamos, la palabra "foo":
Código Javascript
:
Ver originaldocument.querySelectorAll("[name^=foo]")
Una vez que tengas esta selección de elementos, podrás recorrerlos como si se tratara de un arreglo (en realidad será una lista de nodos), leer sus valores y almacenarlos. También podrías almacenar los datos de cada par de elementos por cada vez que se modifiquen los datos que estos contienen, para lo cual deberás apoyarte en los
eventos del teclado.