前回、「getElementById」という処理の意味が全く分からないという事を書きました。分からないので飛ばしたいところなんですが、いろいろなサイトでサンプルを見たりすると、どうやらかなり頻出みたいなんです 「getElementById」 。
このサイトでの説明を引用してみましょう
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
DocumentのgetElementById()メソッドは、idプロパティが指定された文字列に一致する要素を表すElementオブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。
ぼくには意味が全く分かりませんでした。
そこから3時間ぐらい格闘しまして、ようやく何となく掴めてきました。
つまりjavascript内で行った処理の結果をHTMLに反映させたい場合に、その箇所のHTMLにあらかじめIDを設定しておき「getElementById 」でそのidとjavascript内の変数を関連付けさせる。
そうすることで javascript側でHTMLの文字列をいじったりできるようになるというわけです。
だいたいそんな感じのはずです。
僕の今のところの認識としては「 javascriptでHTMLの要素をいじるのに必要な命令」という感じ。
使ってみた
死んだ回数：
これはボタン「死ぬ」ボタンを押すと「死んだ回数」のところの数字が増える仕組みになってます。
ボタンを押すと死んだ回数を数える変数（これを変数Aとします）の数字がプラス１されるようになっています。
その段階ではまだ内部的に数字が増えているだけなので、その変数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>これは誰かに教えるために書いてるというよりは、文章化した方が頭に入ってくるタイプなのと、忘れちゃったときに見え返す用。
僕が作りたいと思っているゲームはサイコロを使うので、とりあえず当面の目標はブラウザ上で「サイコロを振る」というスクリプトを作ること。それに向けて頑張っていきたいです。
