Necesitas un par de variables que te sirvan como comodines para controlar el avance/retroceso del cuadrado. Por ejemplo, veo que para avanzar, el valor de
e
tiene que ser diferente a 100 y para retroceder, el valor de
a
tiene que ser diferente a 0, entonces, solo sería cuestión de que cuando en cada caso se alcance la cifra límite, cambies el valor del comodín que corresponda al movimiento contrario, así solo cuando dicha variable tenga el valor que asignas al completar el traslado del cuadrado de un lado a otro, se podrá ejecutar el desplazamiento inverso.
Código Javascript
:
Ver originalflagA = false; //Comodín para avanzar
flagB = false; //Comodín para retroceder
function muevete(estado){
if(estado){
document.getElementById('btn').setAttribute('onclick','muevete(false)');
atras();
}else{
document.getElementById('btn').setAttribute('onclick','muevete(true)');
adelante();
}
}
function adelante(){
e = document.getElementById('cuadrado').style.left;
e = e.replace('%','');
e = parseInt(e,10);
//Solo si el comodín de avance es 'false', se ejecuta el movimiento
if (!flagA){
if(e!=100){
e = e + 10;
document.getElementById('cuadrado').style.left=e + '%';
//Al alcanzar el límite, cambian los valores de los comodines
if (e == 100) {
flagB = false;
flagA = true;
}
setTimeout(function(){adelante();},25);
}
}
}
function atras(){
a = document.getElementById('cuadrado').style.left;
a = a.replace('%','');
a = parseInt(a,10);
//Solo si el comodín de retroceso es 'false', se ejecuta el movimiento
if (!flagB){
if(a!==0){
a = a - 10;
document.getElementById('cuadrado').style.left=a + '%';
//Al alcanzar el límite, cambian los valores de los comodines
if (a === 0) {
flagA = false;
flagB = true;
}
setTimeout(function(){atras();},25);
}
}
}
Saludos