JQUERY & Javascript Moving to Separate Functions or Clearing Variable

Question

Ok so I'm creating a mobile application using JQUERY. This app has a feature where individuals can take assessment exams, get the number of "true" answers, and then see a DIV with their diagnosis.

In this case I have the javascript that hides and shows the DIVs and totals the number or checkboxes checked.

MY PROBLEM: If I complete an assessment on one page, go into another assessment page the total shows the total from the previous assessment.

I need to find a way to either have the functions defined for the page or clear out the values once the assessment is closed. I have not been able to figure out either. I'm sure the answer is very simple and straight forward. I would really appreciate some help on this one!

Here's my javascript:

// The classes pertain to the DIVs that are shown or hid
//count is the total of checked boxes that is listed in the total text box 

$(document).ready(function () {
$("#class1").hide();
$("#class2").hide();
$("#class3").hide();
$("input[type='checkbox']").click(function () {
    var count = 0;
    $("input[type='checkbox']").each(function () {
        count += $(this).is(":checked") ? 1 : 0;
    });
    $("#class1").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count);

     $("#class2").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count);

     $("#class3").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count); 
});
});



$(document).ready(function () {
$("#class4").hide();
$("#class5").hide();
$("#class6").hide();
$("input[type='checkbox']").click(function () {
    var count2 = 0;
    $("input[type='checkbox']").each(function () {
        count2 += $(this).is(":checked") ? 1 : 0;
    });
    $("#class4").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);

     $("#class5").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);

     $("#class6").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);
});
});

//

$(document).ready(function () {
$("#class7").hide();
$("#class8").hide();
$("#class9").hide();
$("input[type='checkbox']").click(function () {
    var count3 = 0;
    $("input[type='checkbox']").each(function () {
        count3 += $(this).is(":checked") ? 1 : 0;
    });
    $("#class7").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);

     $("#class8").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);

     $("#class8").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);
});
});

Example of the HTML:

<div data-role="content">
     <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">

        <input type="checkbox" name="checkbox2_22" id="checkbox2_22" class="checkboxB" value="1" />
          <label for="checkbox2_22"></label>
        <input type="checkbox" name="checkbox2_23" id="checkbox2_23" class="checkboxB" value="1" />
          <label for="checkbox2_23"></label>

          <input type="checkbox" name="checkbox2_24" id="checkbox2_24" class="checkboxB" value="1" />
          <label for="checkbox2_24"></label>

          <input type="checkbox" name="checkbox2_25" id="checkbox2_25" class="checkboxB" value="1" />
          <label for="checkbox2_25"></label>

        </fieldset>
        <p>Total<input type="text" name"TotalChecked" id="TotalCheckedidB" size"10" readonly="readonly" /></p>
     </div>
   <div data-role="collapsibleset" data-theme="a" data-content-theme="a">

        <div data-role="collapsible" class="class4" id="class4">
            <h3> Total 0 - 2 </h3> 
         <p>  If you indicted "yes" on less than three questions then you may not have a problem with alcohol </p>
         </div></div>
    <div data-role="collapsible" class="class5" id="class5">
        <h3> Total 3 - 8 </h3>
        <p> If you scored between 3 - 8 you are showing signs of possible alcohol dependence and should consider meeting with a professional who can further evaluate your alcohol problems. </p>
        </div>
    <div data-role="collapsible"class="class6" id="class6">
    <h3> Total 9 - 25 </h3>
    <p> If you answered "yes" to more than 8 questions then you may have a serious level of alcohol-related problems requiring treatment. You should seek immediate professional guidance. </p>
    </div>         
    </div>

score 0 · Accepted Answer · edited May 23 '17 at 10:31

It appears that you are interested in a way to store values, this would probably be very useful for the type of quiz / scoring program you are developing. I can suggest looking at localstorage (and other storage options) here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage?redirectlocale=en-US&redirectslug=Web%2FGuide%2FDOM%2FStorage

You can assign specific keys to the variables you are interested in, and then load them whenever you want.

-- Edit: Now I got what you are saying. I'm a beginner myself, but how about this? javascript before leaving the page It suggests to use onunload, in this function you should be able to reset the variables.

Thanks for taking the time to reply. I'm actually looking to do just the opposite. To clear out the javascript function and reset the checkboxes as soon as the person leaves the page. Any ideas on that? — user3328529, Feb 21 '14 at 19:57

JQUERY & Javascript Moving to Separate Functions or Clearing Variable

1 Answers1