<!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;
}
.alumno{
background-color: yellow;
}
.destacado{
box-shadow: 5px 5px 10px;
}
</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);
}
/*
let cadena="";
for (let i = 1; i <= numero; i++) {
cadena+='<input type="text" size="30" id="alumno'+i+"/>";
}
contenedor.innerHTML(cadena);
*/
})
}
function createCaja(nombre) {
let cajaTexto = document.createElement('input');
cajaTexto.size = 30;
cajaTexto.type = "text";
cajaTexto.id = nombre;
cajaTexto.classList.add('alumno');
cajaTexto.classList.add('destacado');
cajaTexto.placeholder = "Introduce el nombre del " + nombre;
cajaTexto.addEventListener("focus",function(){
this.classList.toggle("destacado");
})
return cajaTexto;
}
