user3629180 user3629180 - 21 days ago 6
CSS Question

Javascript div onclick and back button

For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.

The second one, is when the user is on the second div, and clicks on back.

All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.

It's closing both divs.

First Div with two options:


<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>


Second div, with back button:


<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>


Javascript functions:


function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}

function comeBack(divID)
{
var backButton = $(divID).attr('id');

if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}


How can i resolve my issue?

Answer

In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">

Try something like:

function comeBack(divID)
{
    var backButton = $(divID).attr('id');

    if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
    {
        $(divID).closest("form").hide();
        $(".firstQuestion").show();
    }
}