Ver Mensaje Individual
  #4 (permalink)  
Antiguo 23/09/2015, 01:44
mrc95
 
Fecha de Ingreso: septiembre-2015
Mensajes: 6
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Problema con ejercicio javascript

Después de un buen rato, he conseguido sacar el ejercicio, lo dejo por aquí.
No esta nada depurado.
Código:
var boton1 = document.getElementById("foto1");
var boton2 = document.getElementById("foto2");
var boton3 = document.getElementById("foto3");
var boton4 = document.getElementById("foto4");

var click=1;
var variable_aux=" ";
var variable_aux2=" ";
var o1;
var o2;
var o3;
var o4;
var check=0;


function f1(){
    if(click==1){
        click=2;
        variable_aux = document.getElementById("foto1").style.backgroundImage;
        o1=document.getElementById("foto1");
        check=1;
    }else{
        variable_aux2 = document.getElementById("foto1").style.backgroundImage;
        o1=document.getElementById("foto1");
        if(check==2){
            o2.setAttribute("style" ,"background-image: " + variable_aux2);
            o1.setAttribute("style" ,"background-image: " + variable_aux);
        }if(check==3){
            o3.setAttribute("style" ,"background-image: " + variable_aux2);
            o1.setAttribute("style" ,"background-image: " + variable_aux);
        }if(check==4){
            o4.setAttribute("style" ,"background-image: " + variable_aux2);
            o1.setAttribute("style" ,"background-image: " + variable_aux);
        }else{
            check=0;
        }
        click=1;
        check=0;
        variable_aux=" ";
        variable_aux2=" ";
    }
}function f2(){
    if(click==1){
        click=2;
        check=2;
        variable_aux = document.getElementById("foto2").style.backgroundImage;
        o2=document.getElementById("foto2");
    }else{
        variable_aux2 = document.getElementById("foto2").style.backgroundImage;
        o2=document.getElementById("foto2");
        if(check==1){
            o2.setAttribute("style" ,"background-image: " + variable_aux);
            o1.setAttribute("style" ,"background-image: " + variable_aux2);
        }if(check==3){
            o3.setAttribute("style" ,"background-image: " + variable_aux2);
            o2.setAttribute("style" ,"background-image: " + variable_aux);
        }if(check==4){
            o4.setAttribute("style" ,"background-image: " + variable_aux2);
            o2.setAttribute("style" ,"background-image: " + variable_aux);
        }else{
            check=0;
        }
        click=1;
        check=0;
        variable_aux=" ";
        variable_aux2=" ";
    }
}function f3(){
    if(click==1){
        click=2;
        check=3;
        variable_aux = document.getElementById("foto3").style.backgroundImage;
        o3=document.getElementById("foto3");
    }else{
        variable_aux2 = document.getElementById("foto3").style.backgroundImage;
        o3=document.getElementById("foto3");
        if(check==1){
            o3.setAttribute("style" ,"background-image: " + variable_aux);
            o1.setAttribute("style" ,"background-image: " + variable_aux2);
        }if(check==2){
            o3.setAttribute("style" ,"background-image: " + variable_aux);
            o2.setAttribute("style" ,"background-image: " + variable_aux2);
        }if(check==4){
            o3.setAttribute("style" ,"background-image: " + variable_aux);
            o4.setAttribute("style" ,"background-image: " + variable_aux2);
        }else{
            check=0;
        }
        click=1;
        check=0;
        variable_aux=" ";
        variable_aux2=" ";
    }
}function f4(){
    if(click==1){
        click=2;
        check=4;
        variable_aux = document.getElementById("foto4").style.backgroundImage;
        o4=document.getElementById("foto4");
    }else{
        variable_aux2 = document.getElementById("foto4").style.backgroundImage;
        o4=document.getElementById("foto4");
        if(check==1){
            o4.setAttribute("style" ,"background-image: " + variable_aux);
            o1.setAttribute("style" ,"background-image: " + variable_aux2);
        }if(check==2){
            o4.setAttribute("style" ,"background-image: " + variable_aux);
            o2.setAttribute("style" ,"background-image: " + variable_aux2);
        }if(check==3){
            o4.setAttribute("style" ,"background-image: " + variable_aux);
            o3.setAttribute("style" ,"background-image: " + variable_aux2);
        }else{
            check=0;
        }
        click=1;
        check=0;
        variable_aux=" ";
        variable_aux2=" ";
    }
}

boton1.onclick = function () { // add an onclick event to the boton element
    f1(); //this function is called when the boton element is clicked
};boton2.onclick = function () { // add an onclick event to the boton element
    f2(); //this function is called when the boton element is clicked
};boton3.onclick = function () { // add an onclick event to the boton element
    f3(); //this function is called when the boton element is clicked
};boton4.onclick = function () { // add an onclick event to the boton element
    f4(); //this function is called when the boton element is clicked
};