How to show specific div when button was clicked?

Question

I'm making a dress up simulator (that can be rotate 360) but since I'm just a newbie, I can't figure out the logic on how am I suppose to show the necklace or bag when the mannequin faces front. Here's a sample of my code:

JS

<script>
function toggle_div(id) {

    var divelement = document.getElementById(id);

    if(divelement.style.display == 'none')
        divelement.style.display = 'block';
    else
        divelement.style.display = 'none';
    }

    varSide = 0
    document.getElementById("demo").innerHTML; 

    function myFunctionLeft(id1,id2,id3,id4) {
        var a = document.getElementById(id1);
        var b = document.getElementById(id2);
        var c = document.getElementById(id3);
        var d = document.getElementById(id4);

        if (varSide==0){
            varSide = -1;
            a.style.display = 'block';
            b.style.display = 'none';
            c.style.display = 'none';
            d.style.display = 'none';
        }
        else if (varSide==-1){
            varSide = 2;
            a.style.display = 'none';
            b.style.display = 'none';
            c.style.display = 'none';
            d.style.display = 'block';
        }
        else if (varSide==2){
            varSide = 1;
            a.style.display = 'none';
            b.style.display = 'none';
            c.style.display = 'block';
            d.style.display = 'none';
        }
        else{
            varSide = 0;
            a.style.display = 'none';
            b.style.display = 'block';
            c.style.display = 'none';
            d.style.display = 'none';
        }
        document.getElementById("demo").innerHTML; 
    } 

    function myFunctionRight(id1,id2,id3,id4) {
        var a = document.getElementById(id1);
        var b = document.getElementById(id2);
        var c = document.getElementById(id3);
        var d = document.getElementById(id4);

        if (varSide==0){
            varSide = 1;
            a.style.display = 'none';
            b.style.display = 'none';
            c.style.display = 'block';
            d.style.display = 'none';
        }
        else if (varSide==1){
            varSide = 2;
            a.style.display = 'none';
            b.style.display = 'none';
            c.style.display = 'none';
            d.style.display = 'block';
        }
        else if (varSide==2){
            varSide = -1;
            a.style.display = 'block';
            b.style.display = 'none';
            c.style.display = 'none';
            d.style.display = 'none';
        }
        else{
            varSide = 0;
            a.style.display = 'none';
            b.style.display = 'block';
            c.style.display = 'none';
            d.style.display = 'none';
        }
        document.getElementById("demo").innerHTML; 
    }
}
</script>

PHP

<?php

case 's2 d1':
echo "s2 d1";
  echo "<div id='id1'><img src='http://i64.tinypic.com/2r77g29.png'></div>";
  echo "<div id='id2'><img src='http://i63.tinypic.com/zufbxj.png'></div>";
  echo "<div id='id3'><img src='http://i67.tinypic.com/9zokg6.png'></div>";
  echo "<div id='id4'><img src='http://i64.tinypic.com/zu13jt.png'></div>";     
break;

Please let me know if I'm missing something here.

PS: here's my website, it's undone: http://preziosalacrem.com/DRESSUP/index.php

Answer 1

" I can't figure out the logic on how am I suppose to show the necklace or bag when the mannequin faces front. "

So when rotating your mannequin, either left or right, certain values change. In the case that the mannequin is facing the front, the code is as follows:

varSide = -1;
a.style.display = 'block';
b.style.display = 'none';
c.style.display = 'none';
d.style.display = 'none';

As I swap through views, I can see the code dynamically update in my console's browser so I'm confident that the above state of code is what is set when the mannequin is "facing the front".

Since you've set a variable that represents the state of position for the mannequin,

varSide = -1;

then when you load the mannequin's assets, simply do some conditional statement like the following before you load the necklace asset:

if mannequin has necklace {
    if (varSide === -1) {
    //which means that the mannequin is facing front
        load necklace
    }
}