Return a number instead of NaN in jQuery after using Number()

Question

I am currently trying to run a function when that page first loads, and after products/quantities are clicked, that calculates and displays the total price of what the user has selected.

Everything seems to be going well, but my price variable keeps returning NaN. Not sure what I'm missing at this point. I did a few searches and parseInt() seems to be what I want, but it still returns NaN.

Thanks in advance for your help.

jQuery(document).ready(function() {
    var bessie = function() {
        //Pull html code for plus/minus qty selector
        var qtyCode = jQuery('.qtyswitcher-qty').html();

        //Pull the current price text that is up on the website
        var bender = jQuery('.price').text();

        //Remove currency symbol and convert price text to a number
        var leela = Number( bender.replace(/[^0-9\.]+/g,""));

        //Get value of qty that is currently selected
        var qty = jQuery('#qtyswitcher-clone-qty').attr('value');

        //Number() above was resulting in NaN, so trying parseInt to make it show a number
        var price = parseInt(jQuery(leela).val(), 10);
        /*More stuff that didn't work
        leela.val();
        parseInt(leela);
        */

        //multiply price by qty to get the total for the users current selection
        var total = price * qty;

        //New html that will be inserted into the page
        var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + qtyCode + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total + '</p>';

        //New html being inserted
        jQuery(".qtyswitcher-qty").replaceWith(newContent);
    };

    jQuery('.switcher-label').click(bessie);
    jQuery('#qtyswitcher-oneless').click(bessie);
    jQuery('#qtyswitcher-onemore').click(bessie);

    bessie();
});

Answer 1

On this line:

var price = parseInt(jQuery(leela).val(), 10);
// ------------------^^^^^^^^^^^^^^^^^^^

you're passing a number into jQuery, which will make it try to look up thatnumber as a tag (like div) in the document. It won't find anything, so it'll return an empty set. Calling .val() on an empty set gives you undefined, which when parsed via parseInt becomes NaN.

I suspect you don't want to do that, but rather use leela directly:

var price = parseInt(leela, 10);

If you do that, you don't want Number on the earlier line:

var leela = Number( bender.replace(/[^0-9\.]+/g,""));

Just leave it as a string, which you'll parse in a moment.

---

That said, though, the whole thing seems a bit convoluted. If you have a price, and a quantity, then just:

var bessie = function(){
    // Pull html code for plus/minus qty selector
    var qtyCode = jQuery('.qtyswitcher-qty').html();

    // Pull the current price text that is up on the website,
    // removing the currency symbol
    var price = jQuery('.price').text().replace(/[^0-9\.]+/g,"");

    // Get value of qty that is currently selected
    // NOTE: I'm assuming here that this value can never be blank
    var qty = jQuery('#qtyswitcher-clone-qty').val();

    // Multiply price by qty to get the total for the user's current selection
    // The strings will be coerced to numbers, but if you want to ensure
    // that base 10 is used even if something has a leading 0 or some
    // such, you could use parseFloat here (you presumably don't want
    // parseInt, I can't imagine "price" is a whole number in dollars)
    var total = price * qty;
    // Or: var total = parseFloat(price) * parseFloat(qty);

    // New html that will be inserted into the page
    var newContent = '<p class="multiply">' + '$' + price + '/ea</p>' + '<p class="multiply2">x</p>' + qtyCode + '<p class="multiply3">=</p> <p class="multiply">' + '$' + total + '</p>';

    //New html being inserted
    jQuery(".qtyswitcher-qty").replaceWith(newContent);
};