jQueryでBMI計算

ソースコード

  <p>身長(cm): <input type="number" id="height"></p>
  <p>体重(kg): <input type="number" id="weight"></p>
  <p><input type="button" value="BMIを計算" id="calc"></p>

<script type="text/javascript">
    $(function() {
      $("#calc").click( function(){
        var h = Number($("#height").val());
        var w = Number($("#weight").val());
        alert( w / ( (h / 100) * (h / 100) ) );
      })
    })
   </script>

実行

身長(cm):

体重(kg):

比較

JavaScript版

     var h = Number(document.getElementById("height").value);
     var w = Number(document.getElementById("weight").value);

jQuery版

     var h = Number($("#height").val());
     var w = Number($("#weight").val());

で比べると、簡潔になっているのが分かる。
document.getElementById~~ は多用するが鬱陶しかっただけに、jQueryはすごく便利。
掛け算ゲームの方も書きなおすか。