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

【初心者向け】JavaScriptでボタンクリック時に数値を加算するSum関数の作り方

はじめに

本記事では、ボタンをクリックするたびに指定した値を加算していき、結果を画面に表示するシンプルなJavaScriptの「Sum関数」の実装方法を解説します。onclickイベントとparseInt()を組み合わせることで、わずか数行のコードで動的な加算処理を実現できます。

ボタンの準備

まず、以下のようなHTMLボタンを用意します。

<button type="button" onclick="addTheValue(10)">Sum</button>

このボタンがクリックされると、引数として10を渡して関数 addTheValue(10) が呼び出されます。つまり、ボタンを押すたびに現在表示されている値に10が加算されていく仕組みです。

サンプルコード全体

以下が、今回作成するプログラムの完全なコードです。

<!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/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<p>
<h1>Sumボタンをクリックするたびに10ずつ加算されます......</h1>
</p>
<b id="firstValue">10</b>
<button type="button" onclick="addTheValue(10)">Sum</button>
<script>
    function addTheValue(secondValue) {
        var fValue = document.getElementById("firstValue");
        firstValue.innerHTML = parseInt(fValue.innerHTML) + parseInt(secondValue);
    }
</script>
</body>
</html>

コードのポイント

  • document.getElementById("firstValue"): 表示中の値を持つ要素を取得します。
  • parseInt(fValue.innerHTML): 要素内のテキストを文字列から整数に変換します。これにより、数値として正しく加算できます。
  • firstValue.innerHTML = ...: 計算結果を再び画面に書き戻しています。

プログラムの実行方法

上記のプログラムを実行するには、以下の手順に従ってください。

  1. コードを「anyName.html」（例：index.html）という名前で保存します。
  2. VS Codeエディタで保存したファイルを右クリックします。
  3. メニューから「Open with Live Server」を選択します。

ブラウザが自動的に起動し、以下のような初期画面が表示されます。

【初心者向け】JavaScriptでボタンクリック時に数値を加算するSum関数の作り方

実行結果の確認

それでは、「Sum」ボタンを一度クリックしてみましょう。

クリックすると、表示されている値が10から20に更新されます。

【初心者向け】JavaScriptでボタンクリック時に数値を加算するSum関数の作り方

さらにボタンを押し続ければ、そのたびに値が10ずつ増えていきます。このように、onclick属性に関数呼び出しを記述するだけで、簡単にインタラクティブな加算処理を実装できます。

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. 【JavaScript】入力した数値の各桁の合計をボタンクリックで計算・表示する方法

    はじめに 本記事では、ユーザーが数値を入力できるテキストボックスを用意し、ボタンがクリックされたときに、その数値の各桁の合計を計算して画面に表示するJavaScriptプログラムの作り方を解説します。 例えば「12345」と入力して送信ボタンを押すと、「1 + 2 + 3 + 4 + 5 = 15」というように、すべての桁の数字を足した結果が出力されます。 実装コード まずは完成形のコードを見てみましょう。 JavaScriptコード function myFunc() {     var num = document.getElementById(