Trying to add two values from different javascript arrays

Question

I am deriving two different values from these scripts.

Script #1...

//JS for Potential Gen Ed TOC
$(function($) {
    $('#CourseMenu select').change(function() {
        var sum = 0;
        $('#CourseMenu select').each(function(idx, elm) {
            sum += parseFloat(elm.value, 10);
        });

     $('#total_potential').html(Math.min(sum,72).toFixed(2));
    });
});

Script #2...

//JS for Potential Gen Ed TOC from Electives only
$(function($) {
    $('#CourseMenu_Electives select').change(function() {
        var sum = 0;
        $('#CourseMenu_Electives select').each(function(idx, elm) {
            sum += parseFloat(elm.value, 10);
        });

     $('#total_potential').html(Math.min(sum,33).toFixed(2));
    });
});

However, I'd like to pull the data from both of these and have the result display in the following HTML...

   <p><fieldset id="PotentialTOC">
      <legend style="font-weight: bold; font-size: 140%;">Potential TOC Evaluation Results</legend>

      <div id="Results" style="text-align:left; font-family: 'Century Gothic', Gadget, sans-serif; font-size:14px;"><br />
        <div>
          <h2><span id="span"></span>
        Potential Gen Ed TOC:&nbsp;&nbsp;<span id="total_potential"></span>
        <br />
        Potential Money Saved: $<span id="total_money"></span>
        <br />
        Potential Class Time Saved:&nbsp;&nbsp;<span id="total_time"></span> weeks
</fieldset></p>

Here's a jsfiddle to show what I've done so far... I can't transfer more than 33 elective credits and no more than 72 credits overall. I have the scripts laid out well, but again, need them combined to spit out one value.

Answer 1

The first thought that came to mind was to store the result of each function in a hidden div (or even displayed, so a user can see the weight of each choice). Then update the total value by just adding the two columns that contribute to it after the new credit total has been calculated for the new choice.

It will be a minor change, just alter where the current values are being inserted and add an additional line or two to each change callback that pulls in those two values, parses them, adds them, and then updates the total div.

I thought about doing it altogether, just using the previous value from the div, but the problem I ran into was that you weren't sure what the previous contribution was so it made it hard to "zero" the div before adding in the new choice since the choices are not cumulative. One select box should only make one contribution to the final value.

Edit:

So I fiddled with the fiddle and went with the state object approach: http://jsfiddle.net/MCg2d/1

COURSE['Non-electives'] = Math.min(sum, 72).toFixed(2);
var total = (parseFloat(COURSE['Non-electives'], 10) || 0) + (parseFloat(COURSE['Electives'], 10) || 0)
$('#total_potential').html(total);
});

It's very rough but it probably makes more sense than my ramblings above.