Get DIV ID then change href value

Question

I have multiple divs that are switched using this javascript

<script language="JavaScript">
    //here you place the ids of every element you want.
    var ids = new Array('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10');

    function switchid(id) {
        hideallids();
        showdiv(id);
    }

    function hideallids() {
        //loop through the array and hide each element by id
        for (var i = 0; i < ids.length; i++) {
            hidediv(ids[i]);
        }
    }

    function hidediv(id) {
        //safe function to hide an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'none';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'none';
            }
            else { // IE 4
                document.all.id.style.display = 'none';
            }
        }
    }

    function showdiv(id) {
        //safe function to show an element with a specified id
        if (document.getElementById) { // DOM3 = IE5, NS6
            document.getElementById(id).style.display = 'block';
        }
        else {
            if (document.layers) { // Netscape 4
                document.id.display = 'block';
            }
            else { // IE 4
                document.all.id.style.display = 'block';
            }
        }
    }
</script>

Then each div has some option (yes,no,continue,etc..) that switches from one div to another

<div id='a1' style="display:block;">
                <div style="border-bottom: 1px solid black;margin-left:  auto; margin-right:  auto;text-align: center;">
                <i>"I'm sorry to hear you have lost your card.  I can cancel the lost card for your proection."</i><br />
                <b>Find the most recent card by checking it's ISSUE date.</b><br /><br />
                </div>
                &nbsp;
                <div style="margin-left:  auto; margin-right:  auto;text-align: center;">
                <span style="color:red;">Has the card been deactivated already?</span><br /><br />
        <a class="spl_btn btn_green" href="javascript:switchid('a2');" onclick="document.getElementById('back').href='javascript:switchid(\'a1\');';"><span><span>Yes</span></span></a>
        <a class="spl_btn btn_pink" href="javascript:switchid('a3');" onclick="document.getElementById('back').href='javascript:switchid(\'a1\');';"><span><span>No</span></span></a>
                </div>
                </div>

Then outside of the switching divs i have a back button. If you can see from above when you choose an option it changes to the corresponding div and then switches the back buttons href value. Now my only problem is I have 2 divs (numbers 3 and 4) that both have an option (no in this case) that lead to either 5 or 6. This specific button I have in a php variable like so

<?php echo $addr_update; ?>

Then the variables them self work like this

$project_id = $_GET["project_id"];
switch ($project_id) {
case "al":
    $addr_update = "<a class=\"spl_btn btn_pink\" href=\"javascript:switchid('a5');\"><span><span>No</span></span></a>";
    break;

So there are 32 different variables for this one button. I would like to be able to add an onclick event to the variable that would possibly have it grab its div id and then change the back button accordingly.

For example you are on div 2 and press no which in this case will lead you to div 5 and not div 6. The back button needs to point back to div 2. Because both div 2 and div 3 can lead to either 5 or 6 depending on the variable I cannot just add the onclick event to change the back button without knowing where the user was before.

EDIT: Just to add a little more. If you clicked the option on DIV 2 then it would set the back button to DIV 2. So in my mind if i can grab the DIV ID and then apply it to the href="javascript:switchid('a4');" part of it, it should be simple. kind of like this:

<a class="spl_btn btn_green" href="javascript:switchid('a2');" **onclick="document.getElementById('back').href='javascript:switchid(\'a1\');'; Some sort of function that would grab the containing divs id and then put it in the .href value of the document.getElement part**"><span><span>Yes</span></span></a>

Hope this makes sense and any help would be greatly appreciated.

Answer 1

Aside from data-attributes you can track current and prev ids

<script type="text/javascript">
    //here you place the ids of every element you want.
    var ids = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9', 'a10'];

    function switchid(id) {
        if(id === current) {return;}
        hideallids();
        showdiv(id);
        current = id;
    }

    //previous and current id;
    var prev, current;

    function switchNext() {
        var next = this.getAttribute("data-next-id"); //get next id from data-attr
        prev = this.parentNode.parentNode.id; //get parent div's id
        switchid(next);
    }

    function switchPrev() { //For back link
        if(!prev) {return;}
        var curr = current; //store current id
        switchid(prev); //switch to what was previous
        prev = curr; //set prev to what was current. Not sure if you need this
    }

    function hideallids() {
        //loop through the array and hide each element by id
        for (var i = 0; i < ids.length; i++) {
            hidediv(ids[i]);
        }
    }

    function hidediv(id) {
        document.getElementById(id).style.display = 'none';
    }

    function showdiv(id) {
        document.getElementById(id).style.display = 'block';
    }
</script>

Markup

<div id='a1' style="display:block;">
                <div style="border-bottom: 1px solid black;margin-left:  auto; margin-right:  auto;text-align: center;">
                <i>"I'm sorry to hear you have lost your card.  I can cancel the lost card for your proection."</i><br />
                <b>Find the most recent card by checking it's ISSUE date.</b><br /><br />
                </div>
                &nbsp;
                <div style="margin-left:  auto; margin-right:  auto;text-align: center;">
                <span style="color:red;">Has the card been deactivated already?</span><br /><br />
        <a class="spl_btn btn_green" data-next-id="a2" href="#" onclick="switchNext.call(this);"><span><span>Yes</span></span></a>
        <a class="spl_btn btn_pink" data-next-id="a3" href="#" onclick="switchNext.call(this);"><span><span>No</span></span></a>
                </div>
                </div>

And for back button

 <a id="back" onclick="switchPrev.call(this);" href="#">Back</a>

Answer 2

you could use data-attributes on your divs for knowing where to go on which click:

<div id="div1" data-on-yes="div2" data-on-no="div3"></div>

and so on.

in your script you could then read that attribute

document.getElementById('div1').getAttribute('data-on-yes')

hope that helps, your question is kind of confusing ;-)