<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<p>
<label for="numero">Introduce el número de cajas</label>
<input type="number" id="numero" value="0">
</p>
<div id="contenedor"></div>
<script src="js/script.js"></script>
</body>
</html>
.caja{
width: 150px;
height: 150px;
background-color: green;
border: solid 2px #DDDDDD;
display: inline-block;
}
.caja p{
font-size: 3em;
color: white;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
window.onload = function () {
let numero=document.getElementById("numero");
// Añado el evento input al input del número para que cuando cambie actue
numero.addEventListener("input", function(event){
let valor=Number(this.value);
// let valor2=Number(event.target.value); esta es otra manera
// Tengo que crear n cajas y añadirlas al contenedor
let contenedor=document.getElementById("contenedor");
// Borro lo que tenga el contenedor
contenedor.innerHTML="";
// Creo tantas cajas como me haya puesto el usuario
for(let i=1;i<=valor;i++){
contenedor.append(crearCaja(i));
}
})
}
// Creo una función aparte para crear la caja
function crearCaja(numero){
let caja=document.createElement("div");
caja.className="caja"; //caja.classList.add("caja")
// Utilizo las cadenas con formato para poner el número
caja.innerHTML=`<p>${numero}</p>`;
return caja;
}
