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

更新2022/02/04

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

onclickの基本の使い方

「クリック」イベントに対応して処理内容を発動させるもの(イベントハンドラ / イベントリスナー)を記述していきます。

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

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

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

クリック対象の要素を指定してイベントを発生させるならこのようなコード。

<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="eventBtn" を付け、getElementById を使って要素を取得し変数に格納。
「clickEvent」という関数を作って「クリックしたらすること」を記述しています。(ここではpタグにある「クリック」の文字を「クリックOK」に変更する)

入力内容を表示する

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

<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】を使うことで、クリック要素を動的に変更することができます。

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

カテゴリー : JavaScript

TOPへ