javascriptの計算で、Nanとなるのを避けたい。

Question

例えば、下記のようなHTMLを書いて、単価×数量+加算をしたいと考えています。

単価：<input type="text" class="unit_price">円/個 ×       
数量：<input type="text" class="quantity">個 +
加算：<input type="text" class="plus">円

しかし、下記のjQueryを書いた場合、全てのinputに入力すれば計算してくれますが、一つでも抜けていると、Nanとなってしまいます。

cost = (parseInt($("input.unit_price").val()) * 
parseInt($("input.quantity").val())) + 
parseInt($("input.plus").val());

一つの方法として、空欄のinputを0とする方法を考えました。

$("input").on("change",function(){
  $("input").each(function() {
    if($(this).val() == ""){
      $(this).val(0) ;
   }            
}); 

しかし、実際には一つのページにinputが大量にあるのですが、一箇所入力しただけでそれらが全て0になってしまうのは避けたいと思います。

そこで、こういう時はこう処理するのが一般的だというものがあれば、ご教示頂きたいと思います。

お手数をお掛けしますが、よろしくお願い致します。

Answer 1

適当な値を整数だとして計算したいのであれば、 $(this).val() | 0 のようにゼロとビット演算するのがよいです。

Comments

[退会済みユーザー]

非常にシンプルな形で解決できました。
ありがとうございました。

Answer 2

例えばですが

(function (){
  function fixValue(_value){
      return _value-0||0;
  }

  function CalculateCost(_Array){//className
    var _Length=_Array.length,ValueList=[];
    while(_Length--){
      ValueList[_Length]=fixValue(_Array[_Length]/*document.getElementsByClassName(_Array[_Length])[0].value*/);
    }
    return ValueList[0]*ValueList[1]+ValueList[2];
  }
  
  console.log(CalculateCost([500,45,100]));//22600
  console.log(CalculateCost(["abc",45,100]));//100
  console.log(CalculateCost([null,undefined,100]));//100
  console.log(CalculateCost([500,45,""]));//22500
}());

整形用処理として
_value-0||0;
というコードを書いてあります。処理の流れとしては
_value-0//_valueの数値への型変換。数字ならそのままリターン
_value||0;//もし_value-0がfalse(NaN,"",null,undefined,0)なら0を返す
というような処理を書いてあります。つまりinputのvalueに0をセットして計算するのではなくセットされた値が空であれば0として内部的に処理するようにすれば見た目には変化がないでしょう。
しかし理想的には計算に必要な値が揃っていないならばユーザーにそれを伝え、処理自体は実行しない仕組みが理想的ではないでしょうか？
例：
計算関数内の先頭で_value-0の結果を数字かtypeofなどで調べ、数字でないならその旨をサイトに表示し処理自体は早期returnするなど。

直感で書いたコードですので問題点などあるかもしれませんが何か参考になれば……

Comments

[退会済みユーザー]

ご回答頂き、ありがとうございました。
大変参考になりました。