※このページはアフィリ広告を含みます。
₍^⩌ᴥ⩌^₎
今回は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>
<button id="myButton">クリックしてしみて！</button>
<div id="message" class="hidden">ボタンがクリックされました！</div>
</body>
</html>
₍^⩌ᴥ⩌^₎
次はCSSの追加です
₍^⩌ᴥ⩌^₎
直接HTMLにも書けるけど、今回は別ファイルに書くよ。
₍^⩌ᴥ⩌^₎
ファイルを指定するのを忘れないようにね
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickやタップで表示させるJavaScriptのコード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="myButton">クリックしてしみて！</button>
<div id="message" class="hidden">ボタンがクリックされました！</div>
</body>
</html>
.hidden {
display: none;
}
₍^⩌ᴥ⩌^₎
次はJavaScrptのコードを追加してみよう
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickやタップで表示させるJavaScriptのコード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="myButton">クリックしてしみて！</button>
<div id="message" class="hidden">ボタンがクリックされました！</div>
<script src="./sample.js"></script>
</body>
</html>
document.getElementById("myButton").addEventListener("click", function () {
var message = document.getElementById("message");
message.classList.remove("hidden");
console.log("メッセージが表示されました！");
});
₍^⩌ᴥ⩌^₎
こんな感じになります
₍^⩌ᴥ⩌^₎
分かりにくいからボタンのデザインを設定したりするといいよ
₍^⩌ᴥ⩌^₎
このコードは１回表示すると非表示にするためにページをもう一度読みこまないといけないんだ
₍^⩌ᴥ⩌^₎