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