クリックカウンターを作る
ボタンを押したら表示が変わる、最初の小さなアプリです。
使う仕組み
HTMLでボタンと表示欄を作り、JavaScriptでクリックに反応させます。値を覚える変数と、画面の文字を書き換える処理を組み合わせます。リセット操作も付けてみましょう。
1
新しいファイルに下のコードを貼り付け、counter.htmlとしてUTF-8で保存します。
2
ブラウザーで開いて「増やす」と「リセット」を押します。Tabキーでもボタンに移動できます。
3
count += 1の数を変えて、増え方を変えてみましょう。
完成例
作るためのコード
counter.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カウンター</title>
</head>
<body>
<p id="count">0</p>
<button id="add">増やす</button>
<button id="reset">リセット</button>
<script>
let count = 0;
const output = document.querySelector("#count");
document.querySelector("#add").onclick = function () {
count = count + 1;
output.textContent = count;
};
document.querySelector("#reset").onclick = function () {
count = 0;
output.textContent = count;
};
</script>
</body>
</html>少し変えてみよう
「減らす」ボタンを追加してみましょう。値を0未満にしたくない場合は、更新する前にifで条件を確認します。
確認すること
この例は値を保存しません。ページを再読み込みすると0に戻ります。scriptは要素が作られた後、bodyの末尾で実行しています。