javascript - JS - Detect when a user clears a field -


i'm creating calculator current web project, works playing it, came attention clearing third field caused script output nan.

i'm new javascript, , attempted

 if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){      $('#result1').text('')  } 

but doesn't fix issue. i've looked solution problem, it's if no 1 on internet has had problem this! need able clear output (#result1) if 1 of inputs cleared.

this full code:

 $(document).ready(function(){       $('#field11').keyup(function(){          if($('#field12').val() != '' && $('#field13').val() != ''){         $('#result1').text(commafy(math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");         }      });         $('#field12').keyup(function(){         if($('#field11').val() != '' && $('#field13').val() != ''){         $('#result1').text(commafy(math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");         }      });       $('#field13').keyup(function(){          if($('#field11').val() != '' && $('#field12').val() != ''){         $('#result1').text(commafy(math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");          }      });      if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){          $('#result1').text('')      } }); 

here working code on jsfiddle: https://jsfiddle.net/x7a91bnx/

thank you!

you can improve logic using dry principles. keyup handlers performing same logic can extract own function. in function, can retrieve each field's value, setting 0 if it's empty. can check #field13 has value before doing calculation avoid division 0 problems. note commafy() function can simplified too.

try this:

$(document).ready(function () {     $('#field11, #field12, #field13').keyup(calculate); });  function commafy(num) {     return num.tostring().replace(/\b(?=(\d{3})+(?!\d))/g, "."); }  function calculate() {     var field11 = parsefloat($('#field11').val()) || 0;     var field12 = parsefloat($('#field12').val()) || 0;     var field13 = parsefloat($('#field13').val()) || 0;     var result = field13 == 0 ? 0 : commafy(math.round(field11 + field12 / field13 * 1.5)) + ",99";     $('#result1').text(result); } 

updated fiddle


Comments