Vamos a tener una web que nos va a preguntar cuantos nombres queremos introducir. Al darle al botón generar nos creará tantos inputs como nos haya dicho el usario.
Pista: document.createElement(‘input’)
<div id="contenedor" class="container "> <div class="form-group"> <label for="cadena">¿Cuántos nombres vas a introducir?:</label> <input type="text" class="form-control" id="cantidad" placeholder="Introduce un número"> </div> <button id="normalizar">Normalizar</button> <script src="js/test.js"></script> </div>
document.getElementById('normalizar').addEventListener('click', procesar) function procesar () { // Recupero la cantidad introducida const cantidad = parseFloat(document.getElementById('cantidad').value) // Recupero el contenedor const contenedor = document.getElementById('contenedor') // Hago un bucle por el número de veces introducido for (let i = 0; i < cantidad; i++) { // Creo un div para agrupar los dos elementos const elemento = document.createElement('div') // Un párrafo como etiqueta const parrafo = document.createElement('p') parrafo.innerHTML = 'Nombre ' + (i + 1) + ':' // Y el input const miInput = document.createElement('input') // Añado un evento para que veáis que se puede hacer miInput.addEventListener('change', mostrar) // Añado el párrafo y el input al div elemento.appendChild(parrafo) elemento.appendChild(miInput) // Añado el div al contenedor contenedor.appendChild(elemento) } } function mostrar () { console.log(this.value) }