JavaScript入門10 - IT×海外の日常

JavaScriptを簡単にわかりやすく、公式に則って勉強していきましょう！

シリーズ一覧はこちら。

関数を繰り返す
クリックして関数を発火させる
1. ちょっと豆知識
html上に変化をつける
全体像
引数
余談

関数を繰り返す

ではまたクイズから始めたいと思います。以下のコードをコピペして問題を解くようにしてください。

let lapsCompleted = 0

// lapsCpmpleted変数が上昇する関数を作成してください。
// それを３回繰り返してください。

console.log(lapsCompleted)

では答え合わせです。コメントアウトの下に以下のコードが書かれていれば正解です。

function incrementLap() {
  lapsCompleted = lapsCompleted + 1;
}

incrementLap();
incrementLap();
incrementLap();

Ctrl + Alt + Nでコードを実行すると「３」と出てくるはずです。非常に関数は大事なので自分で書けるようにしておいてください。

クリックして関数を発火させる

では久しぶりにindex.jsに戻り、以下のコードを完成させます。

// document.getElementById("count").innerText = 5

// let count = 5
// count = count + 1
// console.log(count)

// ①count変数を0に初期化する
// ②increment buttonがクリックされた時に関数を呼び出す
// ③ボタンがクリックされたとき、count変数を増加させる（そして出力する）
// ④HTMLファイルのcount-elを新しいcountが反映されるように変化させる

では順を追って説明していきます。まずは①です。これは言うまでもありません。以下のコードを参考にしてください。

let count = 0;

次に③です。②のクリックされたときというのは一回後回しにして、count変数を増加させる関数を作成します。そして、念のためコンソールにもcountが出力されるようにします。

function increment() {
  count += 1;
  console.log(count);
}

次は④です。countElを定義し、htmlファイルの”count-el”idの要素を持ってくるように指定します。コンソールに出力してちゃんと要素が取れているかも確認します。

let countEl = document.getElementById("count-el")

console.log(countEl)

この時点で、index.htmlファイルをブラウザで開き、Ctrl(Cmd)+Alt+iで”<h2 id=”count-el”>0</h2>”が表示されていれば成功です。

ちょっと豆知識

変数の名前をよく見て下さい。実は二つの単語がつながっており、二つ目の単語の頭文字が大文字になっていますよね。こういったものをキャメルケースと言います。

javascriptにはもう一つ特徴があり、変数にハイフン（‐）を使用することができません。ぜひお使いのテキストエディタで試してみてください。

html上に変化をつける

実はもうこの時点でincrementをクリックするとコンソール上でcountが上昇しているのがわかります。しかしまだブラウザ上には表れていません。では以下のようにしてください。

countEl.innerText = count
// console.log(count);

これで上書き保存し、index.htmlをブラウザで開いてみてください。incrementをクリックすると数が上昇していますね。

これはcountElの中のテキストにcountを代入するという方式をとっています。つまりhtmlの0というテキストがcount関数にとってかわられているということです。

全体像

let countEl = document.getElementById("count-el");

console.log(countEl);

let count = 0;

function increment() {
  count += 1;
  countEl.innerText = count;
}