※このページはアフィリ広告を含みます。
₍^⩌ᴥ⩌^₎
今回はJavaScrptでクリックやタップをしたときに、指定した要素を追加表示させるJavaScrptのコードを覚えよう
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
いまだ無職でお金もないんだから、とりあえずやってみようよ…
₍^⩌ᴥ⩌^₎
今回もHTML → CSS → JavaScrpt の順番で教えていくから。
₍^⩌ᴥ⩌^₎
まずは作成したhtmlのファイルに基本のコード書こう。
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickやタップで表示させるJavaScriptのコード</title>
</head>
<body>
<!-- ここに内容を追加します -->
</body>
</html>
₍^⩌ᴥ⩌^₎
書けたかな？
₍^⩌ᴥ⩌^₎
次はメインコンテンツを追加してみよう
₍^⩌ᴥ⩌^₎
ページのタイトルと説明を含むヘッダーを作成し、ボタンとメッセージを含むメインセクションを追加しましょう。
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickやタップで表示させるJavaScriptのコード</title>
</head>
<body>
<header></header>
<main>
<button id="addButton">新しい要素を追加</button>
<div id="container">新しい要素を追加するためコンテナ</div>
</main>
<footer></footer>
</body>
</html>
₍^⩌ᴥ⩌^₎
次はJavaScrptのコードを追加してみよう
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickやタップで表示させるJavaScriptのコード</title>
</head>
<body>
<header></header>
<main>
<button id="addButton">新しい要素を追加</button>
<div id="container">新しい要素を追加するためのコンテナ</div>
</main>
<footer></footer>
<script src="./script.js"></script>
</body>
</html>
document.getElementById("addButton").addEventListener("click", function() {
var container = document.getElementById("container"); // コンテナを取得
var newElement = document.createElement("p"); // 新しい段落要素を作成
newElement.textContent = "新しい要素が追加されました！"; // テキストを設定
container.appendChild(newElement); // コンテナに新しい要素を追加
});
₍^⩌ᴥ⩌^₎
JavaScrptのコードを解説するよ
₍^⩌ᴥ⩌^₎
document.getElementById("addButton")
HTML内でid属性が“addButton”である要素を取得するよ
『document』は、ページ全体を表すオブジェクトで、『getElementById』メソッドは指定されたIDの要素を探し出します。
₍^⩌ᴥ⩌^₎
addEventListener("click",function(){...})
『addElventListener』のメソッドは、指定されたイベント(今回は”click”)に対するリスナー(反応する機能)を追加
ボタンがクリックされたときに、指定し無名関数が実行されます。無名関数の中身は、クリック時に実行したい処理です。
₍^⩌ᴥ⩌^₎
var container = document.getElementById("container");
この行ではidが”container”の要素の（新しい要素を取得するための<div>）を取得し、『container』という変数に格納します。
これにより、後でこの要素に直接操作を加えることができるようになります。
₍^⩌ᴥ⩌^₎
var newElement = document.createElement
『creatrElement』のメソッドを使って、新しい<p>（段落）要素を作ります。
これを、newEleent変数に格納します。
新しく作った要素は、まだDOMには追加されてない状態です。
₍^⩌ᴥ⩌^₎
newElement.textComtent = "新しい要素が追加されました！"
ここで、新しく作成した<p>要素の中に表示するテキストを設定しています。『textContent』プロパティを使用することで、要素のテキスト内容を直接変更できます。
₍^⩌ᴥ⩌^₎
container.appemdCild(newElement);
『appendChild』メソッドを使用して、先ほど作製したnewElementをcontainerに追加します。
このメソッドは、既存の子要素の最後に新しい要素を追加します。
これによって<div id="container">の中に新しい段落が表示されるようになります。 をcontainerに追加します。
₍^⩌ᴥ⩌^₎
こんな感じになります
₍^⩌ᴥ⩌^₎
新しい要素を追加を押してみて
₍^⩌ᴥ⩌^₎
分かりにくいからボタンのデザインを設定したりするといいよ
₍^⩌ᴥ⩌^₎
ちょっとボタンぽくCSSで編集してみたよ
₍^⩌ᴥ⩌^₎
このコードは何回でもクリックで要素を追加するんだ。
₍^⩌ᴥ⩌^₎
更新したら消えちゃうし、使い道がいまいち分からないな
₍^⩌ᴥ⩌^₎