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>