let text2 = document.querySelector("#valor2");
let text3 = document.querySelector("#valor3");
let ancho = document.getElementById("width");
let alto = document.getElementById("height");
let square_mod = document.getElementById("created_square");
square_mod.style.display = "none";
ancho.oninput = () => {
text2.innerHTML = ancho.value;
square_mod.style.width = ancho.value * 3 + "px"; // Si el valor es NaN te va a causar un problema
}
alto.oninput = () => {
text3.innerHTML = alto.value;
square_mod.style.height = alto.value * 3 + "px"; // Si el valor es NaN te va a causar un problema
}
SQUARE.addEventListener("click", () => {
square_mod.style.display = "block";
square_mod.style.width = "50px";
square_mod.style.height = "50px";
square_mod.style.backgroundColor = "chartreuse";
square_mod.style.margin = "30px auto";
});
Asegurate de que exista un
<div id="created_square"></div>
dentro del HTML
const text2 = document.querySelector("#valor2");
const text3 = document.querySelector("#valor3");
// Medidas
const ancho = document.getElementById("width");
const alto = document.getElementById("height");
// Ancho y Alto del Square
const size = {
width: "0px",
height: "0px"
}
//let square_mod = document.getElementById("created_square");
// Evitar valores NaN.
function getValidValue(value){
if(isNaN(value)) return "0px";
return value + "px";
}
// Events
ancho.oninput = () => {
text2.innerHTML = ancho.value; // Aqui deberias validar que es un numero sea positivo.
size.width = getValidValue(ancho.value * 3);
}
alto.oninput = () => {
text3.innerHTML = alto.value; // Aqui deberias validar que es un numero sea positivo.
size.height = getValidValue(alto.value * 3);
}
SQUARE.addEventListener("click", () => {
const newsquare = document.createElement("div");
// Aqui deberias validar que size o width no sean "0px"
// Para que no tengas cuadros vacios.
// if(size.width === "0px" || height.width === "0px"){}
// newsquare.id = "created_square"; // No es posible crear un mismo elemento con el mismo ID una y otra vez.
newsquare.classList.add('newsquare');
newsquare.style.width = size.width;
newsquare.style.height = size.height;
newsquare.style.backgroundColor = "chartreuse";
newsquare.style.margin = "30px auto";
// Agrega tu evento
// newsquare.addEventListener("click", () => {
// console.log('Cliqueaste un square')
// });
MAIN2.appendChild(newsquare); // Esto adiciona un hijo, es decir, se van a adicionar tantos square como hagas click.
});