プログラミング入門30日 の Day 23
🎯 今日のゴール ボタンをクリックするとページの表示が変わる仕組みを作れる。
<p id="message">まだ押されていません</p>
<button id="btn">押してね</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
document.getElementById("message").textContent = "押されました!";
});
</script>document.getElementById でHTMLの要素を取得し、textContent で中身を書き換えます。addEventListener("click", ...) は「クリックされたら実行する処理」の登録です。この組み合わせがWebアプリの基本になります。
押すたびにカウントが1ずつ増えるボタンに改造してみましょう。ヒント: let count = 0; を script の先頭に用意します。
let count = 0;
const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
count = count + 1;
document.getElementById("message").textContent = count + "回押されました";
});カウント用の変数 count をイベントの外で宣言しておき、クリックのたびに1増やして表示し直します。
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の提出欄にアップロードしてください。
Q. 「クリックされたら実行する処理」を登録するのはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 23 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。