<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#contenedor {
background-color: aqua;
}
input{
display: block;
}
</style>
</head>
<body>
<label for="alumnos">Dime el número de alumnos</label>
<input type="number" id="alumnos" value="0" />
<div id="contenedor">
</div>
<script src="js/script.js"></script>
</body>
</html>
window.onload=function(){
let alumnos=document.getElementById("alumnos");
alumnos.addEventListener("input", function(){
let numero=this.value;
let contenedor=document.getElementById("contenedor");
contenedor.innerHTML="";
for (let i=1;i<=numero;i++){
let caja=createCaja("alumno"+i);
contenedor.append(caja);
}
})
}
function createCaja(nombre){
let cajaTexto = document.createElement('input');
cajaTexto.size=30;
cajaTexto.type="text";
cajaTexto.id=nombre;
cajaTexto.placeholder="Introduce el nombre del "+nombre;
return cajaTexto;
}
document.getElementById("contenedor").append(cajaTexto);
