<!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 ancho de cajas</label>
<input type="number" id="ancho" value="0">
<label for="numero">Introduce el alto de cajas</label>
<input type="number" id="alto" value="0">
</p>
<div id="contenedor"></div>
<script src="js/script.js"></script>
</body>
</html>
window.onload = function () {
let ancho=document.getElementById("ancho");
let alto=document.getElementById("alto");
// Añado el evento input al input del número para que cuando cambie actue
ancho.addEventListener("input", function(event){
generarCajas();
})
alto.addEventListener("input", function(event){
generarCajas();
})
}
function generarCajas(){
let [ancho,alto]=obtenerValores();
borrarContenedor();
// Crear tantas cajas de ancho y de alto como me pidan
for(let i=1;i<=alto;i++){
let d=document.createElement("div");
for(let j=1;j<=ancho;j++){
let caja=crearCaja(`(${i},${j})`);
d.append(caja);
}
ponerCaja(d);
}
}
function borrarContenedor(){
let contenedor=document.getElementById("contenedor");
contenedor.innerHTML="";
}
function ponerCaja(caja){
let contenedor=document.getElementById("contenedor");
contenedor.append(caja);
}
// Obtengo los valores de mi html
function obtenerValores(){
let ancho=document.getElementById("ancho");
let alto=document.getElementById("alto");
return [Number(ancho.value),Number(alto.value)];
}
// 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;
}
