| ブログトップ | JavaScript関連 |

Javascriptでの加算の注意事項(parseInt)

プログラムの加算において、一般的には以下のように記述します。

  • num = num + 1;
  • num++;
  • num += 1;

しかしJavascriptで数値を引数渡しにして上記のような加算をすると、とんでもない結果が返ってくることがあります。

失敗例のソース(再起処理)

<script>
   function changeInt_false(num){
      if(num >= 100){
         document.getElementById("text_false").innerHTML = num+":以上失敗例でした。";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_false").innerHTML = num;
         setTimeout("changeInt_false('"+num+"')", 20);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_false(0)" value="加算スタート(失敗例)" /></p>
<p id="text_false"></p>

失敗例のサンプル [新しいウィンドウで開く]

いかがでしょうか?

「111」となってしまいました。

要するに、文字列として繋いでしまっているわけですね。(javascriptの「+」は加算の他に文字列をつなぐという役割も果たします。)

こういうときは、parseInt()を利用して、引数から得た情報をInt型にキャストしてあげましょう。

成功例のソース(再起処理)

<script>
   function changeInt_success(num){
      num = parseInt(num);
      if(num >= 100){
         document.getElementById("text_success").innerHTML = num+":成功!";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_success").innerHTML = num;
         setTimeout("changeInt_success('"+num+"')", 10);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_success(0)" value="加算スタート(成功例)" /></p>
<p id="text_success"></p>

成功例サンプル [新しいウィンドウで開く]

これで正常に加算されたかと思います。

ちなみに小数点を使う場合はparseFloat()を利用してください。

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年07月20日 | コメント(0) | トラックバック(0) | JavaScript関連

トラックバック

トラックバックURL

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記