クリックしたら処理をするonclickの基本の使い方

JavaScriptの onclick は「クリックした時に何か処理を行う」時に使うコードです。ユーザーがクリックした時に、起こってほしいことを設定するときに使います。
そんな onclick の基本の使い方メモです。

onclickの基本の使い方

「クリック」イベントに対応して処理内容を発動させるもの（イベントハンドラ / イベントリスナー）を記述していきます。
【イベントハンドラの参考】JavaScript イベントとイベントハンドラのサンプル | ITSakura

発動させるための基本コードはこのような形です。

クリックするもの.onclick = クリックしたら発生させること

クリックとはどのタイミングのことかもしっかりおさえておきましょう。ここをしっかり押さえておかないと動作が意図しないこともあります。
クリックは「押して離す」一連の動作です。押しただけではクリックイベントにはなりません。

押した時・離した時別々の処理をさせたい、別の処理を追加したいといった場合は addEventListener という関数を使用する必要があります。

今回は onclick についてのご紹介ですが、他にもさまざまなイベントハンドラがあります。何かしらの処理をどのタイミングで行うかといったときに色々なイベントハンドラを知っておくと役に立つはずです。
JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room

要素を指定して処理を発動

クリック対象の要素を指定してイベントを発生させるサンプルコードです。
このコードでは「クリック」の文字をクリックしたら「クリックの後にOKという文字が追加」されます。

<div id="eventBtn"><p id="changeText">クリック</p></div>
<script>
const clickBtn = document.getElementById("eventBtn");
function clickEvent() {
  document.getElementById("changeText").innerHTML = "クリックOK";
};
clickBtn.onclick = clickEvent;
</script>

クリック対象のhtmlタグに id を付け、getElementById を使って要素を取得し変数に格納。
clickEvent という関数を作って「クリックしたらすること」を記述しています。

動作チェック

入力内容を表示する

フォームに入力した内容を指定した場所に表示させることもできます。

<p>入力してください</p>
<input type="text" id="cont">
<button type="button" id="btn">入力OK</button>
<div id="output"></div>
<script>
  const clickBtn = document.getElementById("btn");
  const output = document.getElementById("output");
  const content = document.getElementById("cont");
  function clickEvent() {
    output.innerHTML = "入力内容は「" + content.value + "」です";
  }
  clickBtn.onclick = clickEvent;
</script>

動作チェック

フォームを「送信する時」に何かしらの処理を追加したい場合は「onsubmit」を使います。
【関連記事】送信時に処理するonsubmit

数字を足す

ボタンをクリックすると数字が足されるようにすることもできます。

<p id="num">1</p>
<button id="addBtn">クリックすると「1」ずつ追加される</button>
<script>
  const addBtn = document.getElementById("addBtn");
  const num = document.getElementById("num");
  function addNum() {
    num.innerHTML = parseInt(num.firstChild.nodeValue) + 1;
  }
  addBtn.onclick = addNum;
</script>

動作チェック

htmlにonclickを追加して関数を実行

クリックするhtmlタグに「onclick属性」を追加してイベントを発生させる方法。
onclick="関数名()" とすることで、クリックした時に指定した関数が実行されます。

<input type="button" id="btn01" value="テストボタン01" onclick="btnTest()">
<script>
function btnTest(){
  console.log("clickOK");
}
</script>

onclickに処理を複数指定する

onclick属性に複数の処理を指定することもできます。複数指定の場合は、セミコロン（;）で区切ります（最後は省略してもOK）書いた順に実行されるので、処理がうまくいかない場合は順序による影響がないか見直してみてください。

<input type="button" id="btn02" value="テストボタン02" onclick="btnTest02();btnTest03();">

関数に引数を指定する

イベントが発生してイベントハンドラが呼び出されると、発生したイベントに関する情報が含まれる「Eventオブジェクト」が引数に渡されます。

引数に【this】でクリックされた要素を渡す

<input type="button" value="thisボタン" onclick="btnTest03(this)">
<script>
function btnTest03(btn){
  console.log(btn.value);
}
</script>

【this】はクリックする要素のことで戻り値を取得します。

上記のコードでは「this = btn.value」。クリックした要素のvalue属性（thisボタン）を取得しています。【this】を使うことで、クリック要素を動的に変更することができます。

【紹介したコードの実際の動作を確認】