- JSが HTML を書きかえられること（DOM）が分かる
- 変数で「いまの状態」をおぼえておける
- +1ボタンで数が増えるカウンターを作れる
前の回（ボタンを押すと変わる）のつづきです。20〜30分。
DOM：ページを書きかえる
JSは、見えているページの中身を後から書きかえられます。この「JSからさわれるページ」のことを DOM と言います。
書きかえるには、まずどの部品かを名前で見つけます。それが document.getElementById( )。そして見つけた部品の中身を textContent で書きかえます。
<!-- HTML：name で目じるしをつける -->
<p id="count">0</p>
<button onclick="tasu()">+1</button>
id="count" が目じるし。これで「count という部品をちょうだい」とお願いできます。
状態：いまの数をおぼえておく
+1ボタンで数を増やすには、「いまいくつ？」をおぼえておく入れものが必要です。これが変数。いまの中身のことを 状態 と言います。
<script>
let kazu = 0 // ← この kazu が「状態」
function tasu() {
kazu = kazu + 1 // いまの数に 1 をたす
document.getElementById("count").textContent = kazu
}
</script>
ボタンを押すたびに kazu が増え、その新しい数を textContent で count の中に書きこむ。だから画面の数字が変わるんだね。kazu が「状態」だと覚えておこう。
1ファイルの HTML でカウンターを作ろう。
- 上の
<p id="count">0</p>と +1ボタン、<script>を1枚に書く - ブラウザで開いて、+1ボタンを押すと数が増えるのをたしかめる
- 「リセット」ボタンを足す（押すと
kazuを0にもどして書きかえる） - （よゆうがあれば）「-1」ボタンも足してみる
ヒント： リセットの中身は kazu = 0 にしてから、また textContent = kazu で書きかえるだけ。-1 は kazu = kazu - 1 だね。
💡 自分のことばで説明してみよう：「ボタンを押した数だけ画面が変わるのはなぜ？」を、
変数とtextContentのことばを使って説明してみよう。書けたら AIに見せて「この説明であってる？」と確かめてもらおう。
- DOM とは何？（→ JSが書きかえられる、ページの中身）
textContentは何を変える？（→ その部品の中の文字や数）- 「いまの数」をおぼえておくのは何？（→ 変数。その中身が状態）
つぎの回（だい14）では、ここまでを合体させて、出題→判定→結果まで出す「小さなクイズ」を作ります。