Receiving Javascript NaN When calculating input fields

Question

I'm using Jquery to calculate the totals of the inputs for this carpet calculator I'm writing. The problem I'm experiencing is being able to output the values while I'm in the for loop but getting NaN when I am outside of both loops as seen below.

Here's a working example of the problem I'm experiencing as well -

https://codepen.io/CodeHero1/pen/abdjpgL

    $('#calculate-cost').on('click',function(){


    var widthTotalFeet = $('.room-width-feet').map((_,el) => el.value).get();
    var widthTotalInches = $('.room-width-inches').map((_,el) => el.value).get();

    var roomWidthTotalFeet = 0;  // total feet
    var roomWidthTotalInches = 0;  // total inches


    for(var i = 0; i < widthTotalFeet.length; i++) {

        roomWidthTotalFeet += parseInt(widthTotalFeet[i]);
        console.log('in array');
        //This increments correctly
        console.log('feet +' + roomWidthTotalFeet);
    }


    for(var i = 0; i < widthTotalInches.length; i++) {

        roomWidthTotalInches += parseInt(widthTotalInches[i]);
        //This increments correctly
        console.log('inches +' + roomWidthTotalInches);

    }

    var roomFeetAndInches = parseFloat(roomWidthTotalFeet + '.' + roomWidthTotalInches);

    

        //Receiving NaN on these console logs
        console.log('Parse ' + roomFeetAndInches);
        console.log('room widht feet=' + roomWidthTotalFeet);
        console.log('room widht inches=' + roomWidthTotalInches);


});

Your "working example" does not work.

Niet the Dark Absol
– Niet the Dark Absol

2020-07-13 02:47:25 +00:00
Commented Jul 13, 2020 at 2:47 — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 13, 2020 at 2:47

redouglas · Accepted Answer · 2020-07-13 02:34:58Z

1

The issue is with your usage of parseInt. The widthTotalFeet and widthTotalInches arrays can possibly look something like this: ['1','', '2'] ... where empty string is in place for any empty fields. If you do parseInt('') it will result in NaN. To fix this you should exclude the empty strings or make sure they add 0 in your loops.

answered Jul 13, 2020 at 2:34

redouglas

2081 silver badge5 bronze badges

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

1 Comment

Joe Z Over a year ago

Good catch! I added 0 in my loops and that worked great. Thank you for your answer.

Roberto C. Rodriguez-Hidalgo · Accepted Answer · 2020-07-13 02:44:57Z

0

Are you sure roomWidthTotalFeet and roomWidthTotalInches doesn't have trailing spaces? Try making the float conversion like this:

var roomFeetAndInches = parseFloat(trim(roomWidthTotalFeet) + "." + trim(roomWidthTotalInches));

Moreover, it's better to use double quotes in place of single ones...

answered Jul 13, 2020 at 2:44

Roberto C. Rodriguez-Hidalgo

62810 silver badges19 bronze badges

4 Comments

Niet the Dark Absol Over a year ago

I'm no expert on imperial units, but I'm fairly sure you can't just mash the numbers together. 5ft10in for example would not be 5.10 feet.

Roberto C. Rodriguez-Hidalgo Over a year ago

It's true @Niet the Dark Absol. At first let's try the float conversion to work. After that we can fix the bugs. Who knows if Joe Z need to represent the result like that...

Niet the Dark Absol Over a year ago

If your answer is just one step in fixing the problem, you need to make that very clear and likely post as a comment rather than a "finished solution" answer.

Joe Z Over a year ago

Thanks for responding to my question. The trim is probably useful but the answer by @redouglas worked. As far as "mashing" these together, wouldn't passing this string into parseFloat() work?

Collectives™ on Stack Overflow

Receiving Javascript NaN When calculating input fields

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related