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