Skip to main content
En los comentarios explico un poco mas su problema
Origen Enlace
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.
});
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.
});
Origen Enlace

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