【初心者でもわかる】jsでクリックした数をカウントする装置

3008 ワード
初心者 JavaScript jQuery JavaScript テキストリンク

どうも7noteです。カウンターを作ります。（記録保持機能なし）

jsを使った簡易カウンターを作ります。
動きの部分のみのだけなので、ページリロードすればまた0に戻ります。

ソース

index.html
<p>カウンター：<span id="count">0</span></p>
<input type="button" value="カウント" onClick="count();">
script.js
function count(){
  var thisCount = $("#count").html();
      thisCount = Number(thisCount);
      thisCount = thisCount + 1;
  $("#count").html(thisCount);
}

解説

  • html側はテキストとボタンを設置しています。カウントするところをわかりやすいようにspanで囲みidを指定します。
  • var thisCount = $("#count").html();で現状の値を取得。
  • このままだと文字列のままなので、計算できるようにvar thisCount = Number(thisCount);で文字列から数字列に変換。
  • var thisCount = thisCount + 1;で取得した値に1を足します。
  • $("#count").html(thisCount);で値を1足した数字に上書きします。

まとめ

わかりやすく書くならこんな感じでしょうか。ただ記録を保持させたり、もっと複雑な計算をさせたり、カウントした前の数字を保管しておいてまた別で流用するなどが想定される場合はこのプログラムでは少ししんどいかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ