JavaScriptでボタンをクリックして文字を変える｜ブラウザでDOM練習
JavaScriptでボタンをクリックしたときに画面の文字を変更する方法を、HTMLとJavaScriptの完成コードで練習します。
AI Work Studioは完全無料です。インストールせず、ブラウザからコードを書いて実行できます。まずは下の完成コードを試し、値を変えながら動きを確認してみましょう。
この記事でできるようになること
- HTML要素をidで取得できる
- clickイベントを登録できる
- textContentで表示を変更できる
すぐに試せる完成コード
<!-- index.html -->
<h1 id="message">ボタンを押してください</h1>
<button id="changeButton">文字を変える</button>
<script src="script.js"></script>
// script.js
const message = document.getElementById("message");
const button = document.getElementById("changeButton");
button.addEventListener("click", () => {
message.textContent = "クリックされました！";
});HTML部分をindex.html、JavaScript部分をscript.jsへ入力し、Run Previewを押します。プレビューのボタンをクリックすると見出しが変わります。
コードの意味を順番に確認
getElementByIdで要素を探す
HTMLのidとJavaScriptの文字列を一致させます。取得した要素を変数へ保存すると、その後の処理を読みやすく書けます。
clickイベントを登録する
addEventListenerは指定した出来事が起きたときの処理を登録します。ここではclickが起きたらtextContentを書き換えます。
よくあるエラーと直し方
- HTMLとJavaScriptでidの大文字・小文字を一致させます。
- script.jsの読み込み位置を確認します。
- Consoleにnullのエラーが出たら要素取得を確認します。
練習問題
- ボタンを押すと背景色を変える
- クリック回数を表示する
- 2つのボタンで別の文章を表示する
答えを確認する前に試そう
文字変更ができたら、classListを使った色変更へ進みます。まず1つの動作を完成させてから機能を追加してください。
まとめ
DOM操作の基本は、要素を取得し、イベントを登録し、表示や属性を変更する流れです。この3段階を理解するとWebページへ動きを付けられます。
AI Work Studioなら、環境構築なし・完全無料でそのまま練習できます。コードをコピーするだけで終わらず、数字や文字を変更して実行結果がどう変わるか確かめることが上達への近道です。