Ejercicio sencillo para crear cosas

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

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos