[SOLUCIONADO] Problema con ejercicio javascript

[mrc95]

Saludos a todos, hace 20 días empecé a estudiar js y estoy teniendo algún problemilla con los ejercicios, tengo un ejercicio con cuatro divs, en el que tengo que pinchar encima de cualquiera de ellos y despues encima de alguno de los otros 3. Tras haber pinchado los dos divs, las imagenes que tienen de fondo se intercambiaran. Decidí recoger la id del objeto en el que pinchaba e intercambiar las id de los divs, pero me he atascado bastante...
Se agradece cualquier ayuda, gracias de antemano y un saludo a todos.

var myStyle = document.getElementById("css1");
var valorDeHref = myStyle.getAttribute("href"); //this returns the value of href
myStyle.setAttribute("href", "csss/one3.css"); // this sets href attribute to css/two.css

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=" ";

function f1(){
if(click==1){
click=2;
variable_aux = myStyle.getAttribute("id");
}else{
variable_aux2 = myStyle.getAttribute("id");
variable_aux.id(variable_aux2);
variable_aux2.id(variable_aux);
click=1;
}
}function f2(){
if(click==1){
click=2;
variable_aux = myStyle.getAttribute("id");
}else{
variable_aux2 = myStyle.getAttribute("id");

variable_aux.id(variable_aux2);
variable_aux2.id(variable_aux);
click=1;
}
}function f3(){
if(click==1){
click=2;
variable_aux = myStyle.getAttribute("id");
}else{
variable_aux2 = myStyle.getAttribute("id");

variable_aux.id(variable_aux2);
variable_aux2.id(variable_aux);
click=1;
}
}function f4(){
if(click==1){
click=2;
variable_aux = myStyle.getAttribute("id");
}else{
variable_aux2 = myStyle.getAttribute("id");

variable_aux.id(variable_aux2);
variable_aux2.id(variable_aux);
click=1;
}
}

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
};

[lubtufano]

Si lo que quieres es intercambiar las imágenes de fondo ¿para qué cambiar los id? Teniendo las imágenes de fondo declaradas en los div con el atributo style se puede acceder con document.getElementById()

Código Javascript:

<div id="foto1" style="background-image:url('foto1.jpg')"></div>
<script>
  var fondo_foto1= document.getElementById("foto1").style.backgroudImage;
</script>
 

Tampoco se necesita una función para cada div es mejor una sola y usar la variable this en ella para referir al elemento que genera el evento click

[mrc95]

Gracias por la tú respuesta. Entiendo lo que me has puesto, pero una vez guarde el fondo en una variable, como voy a intercambiarlos?

[mrc95]

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
};