jQuery Math - No calculation with empty fields

Question

I have a simple parse to get the sum of a collection of textareas. It works fine, but if there's no value placed in the field, then the calculation just doesn't run.

How can I make the default value 0 without having the contents actually have to be 0? Like, I don't want the fields to load up with a 0 already waiting in the box - I just want the formula to not worry about empty fields.

Here's the jQuery:

jQuery(document).ready(function(){

  jQuery(".button1").click(function(){

  var set1 = function() {
  var calc1 = 0;
  $('.calc1').each( function(index,item) {
    calc1 += parseInt(jQuery(item).val());
  });
  $('.result1').html(calc1);
}
set1();

  });

});

The codepen can be seen here if you'd like to get a better idea: https://codepen.io/JTBennett/pen/NENMdP

I appreciate any help with this! I know it's probably a stupid mistake, but I've tried a few different things and not gotten anywhere yet.

Possible duplicate of [Replace a value if null or undefined in JavaScript](https://stackoverflow.com/questions/1011317/replace-a-value-if-null-or-undefined-in-javascript) — Heretic Monkey, Nov 08 '18 at 22:39

Matthew FitzGerald-Chamberlain · Accepted Answer · 2018-11-08T22:37:02.140

5

Try parseInt(jQuery(item).val() || 0). The || operator will return the second value if the first is falsey. Therefore if the value is empty, it will try to parse '0' which it will successfully.

edited Nov 08 '18 at 22:37

answered Nov 08 '18 at 22:33

Matthew FitzGerald-Chamberlain

564
4
11

1

This is correct, but in order to do less work you can use the numeric `0` instead of a string. – zfrisch Nov 08 '18 at 22:36
Definitely cleaner than my answer +1 – Nosajimiki Nov 08 '18 at 22:37
1

@zfrisch Good catch, forgot the Javascript `parseInt` works on numeric values as well. – Matthew FitzGerald-Chamberlain Nov 08 '18 at 22:37
Thank you very much! I really need to learn how to do this stuff properly, I feel like I'm missing a foundation since I never went to school for this stuff :| – user9393686 Nov 09 '18 at 00:03

score 1 · Answer 2 · answered Nov 08 '18 at 22:35

1

Just make an if statement that looks for an empty field and then replace it with 0.

  $('.calc1').each( function(index,item) {
    var itemValue = jQuery(item).val();
    if (itemValue === "") {itemValue = 0;}
    calc1 += parseInt(itemValue);
  });

answered Nov 08 '18 at 22:35

Nosajimiki

1,073
1
9
17

score 0 · Answer 3 · answered Nov 08 '18 at 22:36

0

You can just replace your line with this:

calc1 += parseInt(jQuery(item).val() || 0);

answered Nov 08 '18 at 22:36

V. Sambor

12,361
6
46
65

jQuery Math - No calculation with empty fields

3 Answers3