JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでボタンをクリックするたびに値を10ずつ増加させる方法

ボタンをクリックするたびに値を10ずつ増加させて表示したい場合、jQueryの click() イベントと JavaScript の parseInt() メソッドを組み合わせることで、シンプルかつ確実に実装できます。以下に、ボタンを押すたびに 10、20、30……と累積していく具体的なコード例を紹介します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="add">10</div>
<div id="sequenceValue"></div>
<button id="addSequenceOf10">押すたびに10ずつ加算</button>
<script>
   addValue = 0;
   $("#addSequenceOf10").click(function() {
      var actualValue = parseInt($("#add").html());
      addValue = addValue + actualValue;
      $("#sequenceValue").html(addValue);
   });
</script>
</body>
</html>

仕組みの解説

まず、変数 addValue を 0 で初期化しておきます。ボタンがクリックされると、click() イベントハンドラが実行され、その中で parseInt() を使って id="add" の div 要素からテキスト「10」を数値として取得します。取得した値を addValue に加算し、その合計を id="sequenceValue" の要素へ出力することで、クリックのたびに 10 ずつ累積された値が画面に表示される仕組みです。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を anyName.html や index.html などの任意の名前で保存します。その後、VS Code エディタ上で該当ファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

出力結果

このプログラムを実行すると、以下のような画面が表示されます。

JavaScriptでボタンをクリックするたびに値を10ずつ増加させる方法

ここでボタンを押すと、最初は「10」と表示され、続けて押すごとに 20、30、40……というように、N 回目のクリック時点で 10 × N の値が表示されていきます。下の出力画像をご確認ください。

JavaScriptでボタンをクリックするたびに値を10ずつ増加させる方法

さらに一度クリックすると、表示は次のように更新されます。

JavaScriptでボタンをクリックするたびに値を10ずつ増加させる方法

  1. Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法

    この記事では、AndroidアプリのWebViewに表示したHTMLページ内のボタンがクリックされたことを、JavaScriptインターフェースを介してネイティブ側で検出する方法を解説します。 WebView上のHTMLとAndroidアプリは、addJavascriptInterface()を使うことで相互に連携できます。HTML側のボタンクリックイベントをJava側のメソッドで受け取り、Toastでメッセージを表示するまでの流れを、手順を追って見ていきましょう。 ステップ1：新しいプロジェクトを作成する Android Studioを起動し、メニューから「File」→「New Projec

  2. Tkinterのキャンバス（Canvas）上にボタンを作成する方法

    Canvasウィジェットは、Tkinterライブラリの中でも特に汎用性の高いウィジェットの一つです。キャンバスを利用すれば、さまざまな図形や円弧、オブジェクトを自由に描画できるほか、それらを動かすアニメーションも実現できます。Tkinterのキャンバス上にボタンを作成するのはとても簡単です。ポイントは、Buttonコンストラクタの親ウィジェット（parent）として、通常の親ウィンドウではなくキャンバスそのものを指定することです。これにより、ボタンはキャンバスの子ウィジェットとして配置されます。サンプルコード以下の例では、キャンバスウィジェット内にラベルとボタンを作成し、ボタンをクリックすると