Javascript - issue with var addition

Question

Can anyone have a look and see why JS i concatenating values instead of adding them? https://codepen.io/mateusz-baran/pen/XWpGdvj

$(document).ready( function () {


// VARIABLES
// ----------------------------------------------------------

var amount, percent, result;
var calculator = $('.calculator');
  var simAmount = calculator.find('.calculator__numsims');
    var pricePerUse = calculator.find('.calculator__peruse');

    var daysOpen = calculator.find('.calculator__daysopen');
    var occupancy = calculator.find('.calculator__occupancy');
    
    var monthlyRev = calculator.find('.calculator__monthlyrev');
    var yearlyRev = calculator.find('.calculator__yearlyrev');
    var roiEta = calculator.find('.calculator__roieta');
var calculatorResult = calculator.find('.calculator__result');
var txtPerUse = calculator.find('.peruse');
  var txtSimNum = calculator.find('.simnum');
  var txtDaysOpen = calculator.find('.daysopen');
  var txtOccupancy = calculator.find('.occupancy');

      var txtMonthlyRev = calculator.find('.calculator__monthlyrev');
      var txtYearlyRev = calculator.find('.calculator__yearlyrev');
      var txtRoiETA = calculator.find('.calculator__roieta');



// INIT BILL
// ----------------------------------------------------------

$(window).on('DOMContentLoaded', function () {

        calcAmount();

});


// RANGE FUNCTION
// ----------------------------------------------------------

calculator.on('input', function () {
            calcAmount();
});

function calcAmount()
{
        txtDaysOpen.text(daysOpen.val());
        txtOccupancy.text(occupancy.val());
        
        txtSimNum.text(simAmount.val());
        txtPerUse.text(pricePerUse.val());

        calculatorResult.text(addCommas(((simAmount.val() + occupancy.val()))));
        
        txtMonthlyRev.text(addCommas((((((occupancy.val() / 100) * pricePerUse.val()) * simAmount.val() ) ) * daysOpen.val()) * 4));
        
        txtYearlyRev.text(addCommas(((((((occupancy.val() / 100) * pricePerUse.val()) * simAmount.val() )) * daysOpen.val()) * 4) * 12));
        
        txtRoiETA.text(parseInt((calculatorResult.text().replace(',','') / txtMonthlyRev.text().replace(',','')) + " months"));
    
    
};

function addCommas(nStr) {
    var tst = Math.round(nStr);
  var num = (tst + "").replace(/\b(\d+)((\.\d+)*)\b/g,                  function(a, b, c) {
        return (b.charAt(0) > 0 && !(c || ".").lastIndexOf(".") ? b.replace(/(\d)(?=(\d{3})+$)/g, "$1,") : b) + c;

this is line 55 in JS section.

With the default data loaded - I would expect to see result as: 110,000 but iam getting 10,000,010,000 - so the numbers are getting concatenated and not added

Can anyone help?

JS + concatenates when one of the values is a string. Try converting the input values to numbers first? — evolutionxbox
– evolutionxbox, Commented Apr 26, 2021 at 11:21
You can use parseInt() for parsing strings that contain valid integers. Note that parseInt() may return NaN if it has not able to parse the integer inside the string. — MMJM
– MMJM, Commented Apr 26, 2021 at 12:42

cMarius · Accepted Answer · 2021-04-26 11:27:01Z

1

Try using parseInt() or parseFloat() to change string variables into integers, like this calculatorResult.text(addCommas(((parseInt(simAmount.val()) + parseInt(occupancy.val())))));

In JS, the + operator concatenates variables that are of string type, in addition to adding number variables.

edited Apr 26, 2021 at 11:27

answered Apr 26, 2021 at 11:21

cMarius

1,1322 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mateusz Baran Over a year ago

thank you! it worked. can you also see why when using sliders 3 and 4 does not trigger any changes in result?

cMarius Over a year ago

take a look at your number format in

calculatorResult.text(addCommas((parseInt(simAmount.val()) * 0.01) / parseInt(pricePerUse.val()) * (parseInt(daysOpen.val()) * 0,001) + (parseInt(occupancy.val()) * 0,1)));

, for example you are using (occupancy.val()) * 0,1 instead of (occupancy.val()) * 0.1. Always try to use . for decimals in JS.

Mateusz Baran Over a year ago

much appreciated for your help!

Udendu Abasili · Accepted Answer · 2021-04-26 11:29:44Z

0

This is the culprit. Add parseInt to the value. This converts the string to integer

  calculatorResult.text(addCommas(((parseInt(simAmount.val()) + parseInt(occupancy.val())))))

Do this for any other addition in your code

answered Apr 26, 2021 at 11:29

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

Collectives™ on Stack Overflow

Javascript - issue with var addition

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related