Increasing/decreasing large sets of integers

Question

I'm having a little trouble with this concept. I'm attempting to write a relatively simple script which will increase/decrease a set of integers by a specified amount.

This code functions logically but not as desired.

HTML:

            <table class="ebc-table">
                <tr>
                  <td class="priceChange">4.00</td>
                  <td class="priceChange">16.00</td>
                  <td class="priceChange">31.00</td>
                  <td class="priceChange">51.00</td>
                </tr></table>

jQuery:

        $(".applybutton").click(function(){
            var adjFactor = $("#adj_factor :selected").val();
            var adjAmount = $("#adj_amount").val();

            if( adjFactor == "$" )
            {
                $(".priceChange").each(function() {
                    var test = $(this).html();
                    var updateAmt = parseFloat(test) + parseFloat(adjAmount);
                    //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
                    return $(this).html(updateAmt);
                });
            }

        });

Whenever the adjustment amount is entered and user clicks the apply button, all values change accordingly. As you can see in the code above, every time the sum is calculated it uses the integer present in the TD, NOT the original starting number as intended... because of course, $(this).html() changes every time the sum is calculated and written to html. In other words, the sums just stack on top of each other.

How could I write this to retain the original number, adding/subtracting from the original number, NOT to/from the accumulated number?

I realize my explanation might be confusing. I'll post a jsfiddle if requested.

Answer 1

You could use the data-* attributes and the jQuery .data() to get it. See this.

HTML:

<table class="ebc-table">
            <tr>
              <td class="priceChange" data-origprice="4.00">4.00</td>
              ...
            </tr>
</table>

JS/jQuery:

$(".applybutton").click(function () {
    var adjFactor = $("#adj_factor :selected").val();
    var adjAmount = $("#adj_amount").val();

    if (adjFactor == "$") {
        $(".priceChange").each(function () {
            var test = $(this).data('origprice'); //gets data-origPrice attribute
            var updateAmt = parseFloat(test) + parseFloat(adjAmount);
            //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
            return $(this).html(updateAmt);
        });
    }

});

Browser support is very nice too!

Answer 2

One strategy is to save the original values in an array.

    var originals = []
    $(".applybutton").click(function(){
    var adjFactor = $("#adj_factor :selected").val();
    var adjAmount = $("#adj_amount").val();

    if( adjFactor == "$" )
    {
        if (originals.length === 0) {
            $(".priceChange").each(function(i) {
                originals[i] = parseFloat($(this).html());
            }
        }
        $(".priceChange").each(function(i) {
        return function() {
            var test = $(this).html();
                var updateAmt = originals[i] + parseFloat(adjAmount);
                //if( isNaN( parseFloat( updateAmt) ) ) // do something here eventually
                else{return $(this).html(updateAmt); }
            });
        }
    }

});

Answer 3

You could store the original number in a variable on page load and use that value when incrementing.

Here's a basic example:

$(document).ready(function(){
    var origNumber = parseInt($('#num').text(), 10);
    
    $('button').click(function() {
        var incr = parseInt($('#incr :selected').val(), 10);
        alert(origNumber + incr);
    });
});

JSFiddle

If you need to store multiple values, use an array.