質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.21%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 10K+

mulberryfields

score 805

例えば、下記のような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になってしまうのは避けたいと思います。

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

お手数をお掛けしますが、よろしくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/24 09:51

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

    キャンセル

0

例えばですが
(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するなど。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/24 09:53

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る