0

Estoy empezando en el tema de la programación de manera autodidacta. Hasta el momento solo HTML5, CSS y JS.

La duda es, ya se que puedo modificar estilos de elementos ya creados en HTML y crearlos desde JS con estilos específicos, pero ¿se puede crear un elemento y posteriormente poder modificar sus estilos a tiempo real desde la parte cliente?

Tengo un botón que crea un cuadrado y quiero modificar su width y height con <input type=range> para cada uno de los valores.

Esta es la parte de código que no funciona, en consola la variable square_mod me aparece como null, created_square es la "id" que se le asigna al cuadrado creado desde JS.

Gracias de antemano, un saludo.

EDITO

Mientras escribia mensaje se ha resuelto mi duda/problema, la pena es que realmente no se cómo, por que apenas he tocado el codigo original, y antes de modificar nada solamente queria postear la mayor info de mi código. Aún así la cuelgo por si le sirve a alguien de ayuda. Mi duda también queda resuelta, y es que si se puede modificar a tiempo real un objeto creado dinamicamente.

Estas son las partes de HTML y de JS que intervienen. En HTML con los puedo elegir para crear un circulo, un cuadrado o un rectangulo en el con unos estilos ya definidos.

Con JS la idea es en principio manejar a tiempo real su "width" y su "heigth" desde el lado cliente, no se si me explico. Para que el usuario final pueda aumentar o disminuir el tamaño de los elementos que crea con los

 <form action="" id="form1">
            <p>Select something <br/>to create</p>
            <label for="circle">Circle</label>
            <input type="radio" id="circle" name="radiotest"   value="circle">
            
            <label for="square">Square</label>
            <input type="radio" id="square" name="radiotest" value="square">
            
            <label for="rectangle">Rectangle</label>
            <input type="radio" id="rectangle" name="radiotest" value="rectangle">
            
        </form>


<div id="main3">
    <h2>Set the size of the elements</h2>
    <div class="range2">
    
    <label for="rango2">Width</label><br/>
    <input type="range" value="50" id="width" name="" min="0" max="100" autocomplete="off" >
    <h3 id="valor2">50</h3>

    <label for="rango3">Height</label><br/>
    <input type="range" id="height" name=""   min="0" max="100" autocomplete="off" >            
    <h3 id="valor3">50</h3>
    </div>

</div>
<div id="main2">

</div>

//He aislado las partes que no intervienen, en este caso también he omitido los eventos para crear el circulo y el rectangulo para aligerar el código.

 const SQUARE = document.getElementById("square");
 const MAIN2 = document.getElementById("main2");
 const MAIN3 = document.getElementById("main3");
 let text3 = document.querySelector("#valor3");
 let ancho = document.getElementById("width");
 let alto = document.getElementById("height");

 let newSquare = document.getElementById("created_square");

 ancho.oninput = () => {
  text2.innerHTML = ancho.value;
  newSquare.style.width = ancho.value *3 + "px";
 }
 alto.oninput = () => {
  text3.innerHTML = alto.value;
  newSquare.style.height = alto.value *3 + "px";
 }

// Evento para crear cuadrado en el div MAIN2 y evento para borralos 1 a 1

 SQUARE.addEventListener("click", () => {
  let newsquare = document.createElement("div");

 MAIN2.appendChild(newsquare);
  newsquare.id = "created_square";
  newsquare.style.width = "50px";
  newsquare.style.height = "50px";
  newsquare.style.backgroundColor = "chartreuse";
  newsquare.style.margin = "30px auto";

 });

 SQUARE2.addEventListener("click", () => {
  
  created_square.remove();

  });
4
  • 1
    Seria bueno que mostraras todo tu código, para tener mayor información. Commented el 12 jul. 2021 a las 16:38
  • El problema es que está intentando modificar el cuadro cuando aún no ha sido creado Commented el 12 jul. 2021 a las 16:42
  • Jhon , te refieres por el orden en el que está dispuesto el código ?. Una vez creado el elemento, aparece tanto en la página como en la consola, pero la variable salta como null y no modifica nada. Si ocurre como dices como hago para invertir ese orden ?
    – Pablo1338
    Commented el 12 jul. 2021 a las 17:03
  • TheOligarch, disculpa si no me expreso bien, por la falta de codigo etc.. excluí parte del código que no tiene "en principio" relación con la acción que quiero realizar. No se si te refieres a poner todo el JS y el HTML o solo la parte de HTML que corresponde al problema.
    – Pablo1338
    Commented el 12 jul. 2021 a las 17:08

2 respuestas 2

0
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.
});
8
  • Hola Diego, si en consola aparece ese div una vez creado por evento.
    – Pablo1338
    Commented el 12 jul. 2021 a las 17:02
  • Y no cumple con tu proposito aun ? Commented el 12 jul. 2021 a las 17:04
  • Disculpa, no habia visto tu modificacion del codigo, en el original si me crea el div, en tu propuesta no me crea ese div y me salta el square_mod is null
    – Pablo1338
    Commented el 12 jul. 2021 a las 17:18
  • Tienes que ingresar el codigo html que esta en mi respuesta, dentro de tu HTML... Tiene que existir antes de que hagas lo que quieres hacer Commented el 12 jul. 2021 a las 17:20
  • Agregalo dentro de "MAIN2" Commented el 12 jul. 2021 a las 17:21
0

Cuando creas una variable de creación de un elemento, normalmente se hace algo como el estilo:

let btn = document.getElementById('btn');

btn.addEventListener('click', ()=>{
    let cuadrado = document.createElement('div');
        cuadrado.style.width = '300px';
        cuadrado.style.height = '300px';
        cuadrado.style.backgroundColor = 'purple';

    document.body.append(cuadrado);
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" id="btn">CLICK</button>
</body>
<script src="_js/core.js"></script>
</html>

Te pongo un ejemplo rápido de cómo hacerlo. Una vez tienes el botón creado en el html, lo encuentras en el DOM con un selector, en mi caso, id, y le añades un eventListener que es como me imagino que hasta ahí, lo tengas.

Una vez ejecutes dicho evento, tienes que crear una variable para poder manejar el elemento. Con el nombre de dicha variable, en mi caso "cuadrado", puedes agregar estilos, eventos, y lo que quieras a dicho elemento. En el caso del ejemplo le añado styles width y height y un backgroundColor. Se pueden añadir muchas cosas más. Busca "agregar x cosa a un elemento dinámico js".

Si vas a crear elementos con eventos, recuerda que se lo puedes añadir directamente ahí, ya que el nombre de variable funciona para crear uno solo, le crearás con el evento. No cometas el mismo error que yo cuando empezaba de crear elementos y después añadirles uno por uno los eventos.

Una vez tengas definido el elemento creado en si, solo tienes que hacer un append. Hay varios tipos, pero este es el que más uso yo. Padre.append(elementohijo).

Con esto creo que podrás solventar tu duda.

1
  • Hola AQMR! Ya he resuelto mi duda/problema, he editado el código que postee, ahi lo explico un poco todo. Gracias por tu ayuda!!
    – Pablo1338
    Commented el 14 jul. 2021 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.