ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

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

• 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()を利用してください。