Estoy tratando que al presionar el botón que dice "Iniciar", el cuadrado se empiece a mover de izquierda a derecha hasta cierto punto límite, una vez alcanzado ese límite, el cuadrado debe devolverse a su posición inicial y de ahí volver a ejecutarse la función de manera infinita, para que el cuadrado se mueva siempre de izquierda a derecha y viceversa.
Hasta el momento solo he podido hacer que se mueva hacia la derecha, de ahí no se cómo devolverlo y reiniciar la función, quise usar una especie de bandera con la posición left
, pero al hacerlo el cuadrado ya ni se movía.
Éste es el código que llevo hasta el momento:
function mover() {
document.getElementById('cuadrado').style.left = "400px";
}
.cuadrado {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
transition: all 0.4s;
}
<p><button type="button" id="btnIniciar" onclick="mover()">Iniciar</button></p>
<div class="cuadrado" id="cuadrado"></div>