javascriptでゲームを作りたい その2 (「getElementById」とは)

前回、「getElementById」という処理の意味が全く分からないという事を書きました。分からないので飛ばしたいところなんですが、いろいろなサイトでサンプルを見たりすると、どうやらかなり頻出みたいなんです 「getElementById」 。

このサイトでの説明を引用してみましょう

Document の getElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

ぼくには意味が全く分かりませんでした。

そこから3時間ぐらい格闘しまして、ようやく何となく掴めてきました。

つまりjavascript内で行った処理の結果をHTMLに反映させたい場合に、その箇所のHTMLにあらかじめIDを設定しておき「getElementById 」でそのidとjavascript内の変数を関連付けさせる。
そうすることで javascript側でHTMLの文字列をいじったりできるようになるというわけです。
だいたいそんな感じのはずです。

僕の今のところの認識としては「 javascriptでHTMLの要素をいじるのに必要な命令」という感じ。

使ってみた

死んだ回数:

これはボタン「死ぬ」ボタンを押すと「死んだ回数」のところの数字が増える仕組みになってます。

ボタンを押すと死んだ回数を数える変数(これを変数Aとします)の数字がプラス1されるようになっています。

その段階ではまだ内部的に数字が増えているだけなので、その変数Aの値をページ上に表示したい。

そのためにあらかじめ「死んだ回数」のパラグラフにIDを設定しておき、「getElementById 」 で変数Bに関連付けます。

そして変数Bの要素として「死んだ回数:(変数A)」という文字列を入ると、関連付けられたHTMLに 「死んだ回数:(変数A) 」が表示されるという感じ。

実際にはこんな風に書きました

 <p id="cntBtn">死んだ回数:</p>
 <input type="button"  value="死ぬ" onclick="onBtn()">

 <script>
 var cnt = 0;
 var btn = document.getElementById("cntBtn");
 function onBtn(){
  cnt++;
  alert("あなたは死にました");
  btn.innerHTML = "死んだ回数:" + cnt;
}
</script>

これは誰かに教えるために書いてるというよりは、文章化した方が頭に入ってくるタイプなのと、忘れちゃったときに見え返す用。

僕が作りたいと思っているゲームはサイコロを使うので、とりあえず当面の目標はブラウザ上で「サイコロを振る」というスクリプトを作ること。それに向けて頑張っていきたいです。

その3書きました!