【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる。

完成コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>sample1</title>
</head>
</body>
<button onclick="alert('Hello')">クリックしてください
</button>
</body>
</html>

実行結果

解説

HTMLの<button>タグを使用して、「クリックしてください」というボタンを作成しました。

「onclick属性」を使用しています。

onclick属性は、要素がクリックされた際に発生するイベントの処理を設定するための属性です。属性値にスクリプトを指定することで、要素がクリックされた際に実行される処理を設定することができます。引用:MITSUE-LINKS

ワードプレスで「カスタムHTML」のブロックエディタに上記の完成コードを記述しています。

「カスタムHTML」を使用すれば、記述するHTMLは<body>タグの中だけでも表示は変わりませんでした。

上記はHTML内に直接javascriptを書き込んでいます。

初めてのJavaScript 第3版
手元に置いておきたいJavaScriptの教科書!
【ワードプレス】JavaScriptを使用してボタンをクリックするとポップアップを表示させる
ツイートもチェックしよう!