2

Estoy aprendiendo JS y lo que quiero es que cada vez que se presiona un botón, se mueva de un lado para el otro el bloque azul. Actualmente solo consigo que se mueva 1 vez. ¿En qué puedo estar fallando?

PD: La idea no es colocar clases con "float" sino mover directamente los elementos del DOM.

Gracias :)

let button = document.querySelector("button");
let container = document.querySelector(".div-container");
let red = document.querySelector(".red");
let blue = document.querySelector(".blue");

function frente() {
  container.insertBefore(blue, container.firstElementChild);
};

function fondo() {
  container.insertAfter(blue, container.lastElementChild);
};

button.addEventListener("click", () => {
  container.firstElementChild && red ? frente() : fondo();
});
.div-container{
    width: 100%;
    height: 400px;
    display: flex;
}
.switch-container{
    display: flex;
}
.red{
    display: block;
    width: 50%;
    height: 400px;
    background-color: rgb(219, 124, 156);
}
.blue{
    display: block;
    width: 50%;
    background-color: rgb(99, 145, 212);
    height: 400px;
}
button{
    margin: 20px auto;
    display: block;
    padding: 10px;
}
<div class="switch-container">
        <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Cambiar lado</button>
    </div>
    <div class="div-container">
        <div class="red"></div>
        <div class="blue"></div>
    </div>
</div>

0

1 respuesta 1

2

1- La función container.insertAfter no existe, lo que puedes hacer es obtener los dos elementos red y blue y remover uno del elemento contenedor(El primero) y después volverlo a agregar en el mismo contenedor:

container.removeChild(first_element);//Quitamo el primer elemento del nodo padre.
container.appendChild(first_elemento);//Lo agrega al final

2- ¿Porque no simplemente colocas una variable global que sea booleana que te diga en cual de los dos estas?.

let button = document.querySelector("button");
let container = document.querySelector(".div-container");
let red = document.querySelector(".red");
let blue = document.querySelector(".blue");
let in_fondo=true;
function fondo(){
    container.removeChild(red);
    container.appendChild(red);
    in_fondo=true;
}
function frente(){
    container.removeChild(blue);
    container.appendChild(blue);
    in_fondo=false;
}
button.addEventListener("click", () => {
    in_fondo? frente() : fondo();
});

para que asi al llegar al onclick te sea mas fácil cambiarlas:

button.addEventListener("click", () => {
    in_fondo? frente() : fondo();
});

Incluso puedes resumir mas la función:

button.addEventListener("click", () => {
    let colors=document.querySelector(".div-container div");//Obtiene el primer elemento div de la clase div-container.
    container.removeChild(colors);//Quitamos ese elemento del nodo.
    container.appendChild(colors);//Agregamos ese elemento al final.
});

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.