＋ボタンをクリックすることで数値が1ずつ加算される（カウントアップする）アプリを作って変数の使い方を学びます。
実行イメージ
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>counter</title>
</head>
<body>
<p id="counter">0</p>
<p><input type="button" id="btnAdd" value="+"></p>
</body>
</html>
style.css
/* style.css */
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
#counter{
width: 100%;
padding: 1em 0;
font-size: 64pt;
text-align: center;
}
#btnAdd{
width: 100%;
font-size: 64pt;
}
main.js
ハイライト部分：変数nの使い方がポイントです。
// main.js
let counter, btnAdd;
let n;
function addCount(){
n++;
counter.innerHTML = n;
}
window.addEventListener("load", ()=>{
// 起動時の処理
counter = document.getElementById("counter");
btnAdd = document.getElementById("btnAdd");
n = 0;
btnAdd.addEventListener("click", addCount);
});
解説
HTML部分
JavaScriptからHTMLタグを特定するために、カウンタ数値表示部分（pタグ）と＋ボタンのクリック処理用にそれぞれ counter, btnAdd というidをつけてあります。
<p id="counter">0</p> <p><input type="button" id="btnAdd" value="+"></p>
CSS部分
数値表示は中央揃え（text-align: center）、数値とボタンは画面幅一杯に表示（width: 100%）として見やすくしています。
JavaScript部分
カウントアップするための変数nを定義しています。
let n;
変数は、関数などの外側で定義することでプログラムのどの部分からも読み書き可能なグローバル変数扱いとなります。
先頭で宣言したグローバル変数nは以下の2箇所で利用しています。
１．カウントアップした変数を画面に表示する関数定義部分
function addCount(){
n++;
counter.innerHTML = n;
}
２．ロードイベント（ページが読み込まれた際）に初期化する部分
window.addEventListener("load", ()=>{
// 起動時の処理
counter = document.getElementById("counter");
btnAdd = document.getElementById("btnAdd");
n = 0;
btnAdd.addEventListener("click", addCount);
});
上記、ロードイベント内で＋ボタンをクリックした際にaddCount関数を呼び出すようイベントリスナに設定しています。
btnAdd.addEventListener("click", addCount);
そのため、＋ボタンを押すたびに変数nの値が+1加算され表示されるわけです。
この状態ではあくまでカウンタ風ですが、－ボタンやリセットボタンなどの機能を追加すれば、よりカウンタに近づくと思います。
作成手順を公開しています（YouTube動画）
YouTubeでも作成手順がご覧いただけます。
エディタは、Visual Stuido Codeを利用しています。
コメント