Skip to main content
se añadieron 2457 caracteres en el cuerpo
Origen Enlace

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

let text2<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.querySelectorgetElementById("#valor2""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 square_modnewSquare = document.getElementById("created_square");

 ancho.oninput = () => {
  text2.innerHTML = ancho.value;
  square_modnewSquare.style.width = ancho.value *3 + "px";
 }
 alto.oninput = () => {
  text3.innerHTML = alto.value;
 square_mod 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();

  });
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");

ancho.oninput = () => {
  text2.innerHTML = ancho.value;
  square_mod.style.width = ancho.value *3 + "px";
}
alto.oninput = () => {
 text3.innerHTML = alto.value;
 square_mod.style.height = alto.value *3 + "px";
}
 
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";

});

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();

  });
se eliminaron 21 caracteres en el cuerpo
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

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

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

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

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

Gracias de antemano, un saludo.

introducir el código aquí


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");

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

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";

});

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 especificos, pero ¿se puede crear un elemento y posteriormente poder modificar sus estilos a tiempo real desde la parte cliente?

Tengo un boton que crea un cuadrado y quiero modificar su width y su height con para cada uno de los valores.

Esta es la parte de codigo 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.

introducir el código aquí


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");

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

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";

});

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.

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");

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

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";

});
Origen Enlace

Modificar elementos DOM creados dinamicamente ( HTML , JS)

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 especificos, pero ¿se puede crear un elemento y posteriormente poder modificar sus estilos a tiempo real desde la parte cliente?

Tengo un boton que crea un cuadrado y quiero modificar su width y su height con para cada uno de los valores.

Esta es la parte de codigo 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.

introducir el código aquí


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");

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

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";

});