JavaScript：HTMLの要素をクリックしたらJavaScriptのプログラムを動かす方法
初心者向け。サイト上でボタンなどの要素をクリックしたらJavaScriptを動かしたいという場合のやり方を説明します。
要素をクリックしたらJavaScriptを動かす手順
要素をクリックしたらJavaScriptを動かすには、htmlファイルとJavaScriptファイルに手を加えます。具体的な手順は以下の通りです。
JavaScriptファイルを用意する
動かしたい処理が記述されたJavaScriptファイルを用意します。ここでは仮にファイル名を「sample.js」としてファイルの内容は下記とします。
function SampleFunction(sample_text){
console.log(sample_text);
}
実行されるとChromeのコンソールに引数のsample_textを表示するというシンプルなプログラムです。
htmlのheadタグ内で読み込む
ステップ１で作成したJavaScriptファイルをWordPressのテンプレートフォルダ内に保存し、htmlのheadタグ内で下記のように読み込みます。
<head>
<script src="<?php echo get_template_directory_uri(); ?>/sample.js"></script>
</head>
補足：JavaScriptを読み込む場所
JavaScriptの読み込みはheadタグまたはbodyタグの最後に記述します。読込んだ瞬間にhtml要素に何らかの処理を行うJavaScriptの場合は先にhtml要素を読み込んでおく必要があるためbodyの最後に記述します。いつ読み込まれても処理が変わらないJavaScriptの場合は記述場所は、（どこでも問題は無いのですが）わかりやすさのためheadに記述します。
html要素にonclick属性を追加する
クリックするhtml要素（タグ）にonclick属性を追加してJavaScriptの関数を呼び出します。下記はpタグにonclick属性を追加してクリックしたらSampleFunction()が呼び出されるようにしています。
<p class="cat-selector-checkbox web" type="checkbox" onclick="CatSelectorClick('クリックした')">ボタン</p>
補足：要素は何でもOK
ここではpタグにonclick属性を付けましたが、基本的にはクリックできる要素であればタグの種類は問いません。私の場合はdivタグやlabelタグやliタグなどに使うことがあります。
上記の手順ではクリックして正常にJavaScriptが作動した場合には、Chromeのデベロッパーツールのconsoleタブ内に「クリックした」というログが表示されます。
要素をクリックしたらJavaScriptを動かす手順は以上です。