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)
}