JavaScriptとonclickのサンプル

JavaScriptのonclickイベントハンドラのサンプルです。

目次

onclick onclickの動作
  onclick(イベントハンドラ)に関数を登録する
引数 引数にeventを指定する
  引数にthisを指定する
  引数のthisにidやvalueを指定する

onclickの動作

onclickの動作のサンプルです。

<input type="button" id="b1" value="ボタン1" onclick="test1()">

<script>
function test1(){
	console.log("test1"); //test1と表示される
}
</script>

1行目は、ボタンです(input type="button")。ボタンをクリックするとonclickの右にあるtest1から、4行目のtest1関数が実行されます。
onclickを書く時のポイントはtest1という関数名だけでなく、かっこ()も記述します。

onclick(イベントハンドラ)に関数を登録する

イベントハンドラに関数を登録し処理を実行できます。

<p id="p1">クリックして下さい</p>

<script>
  function test1() {
    console.log("testです");
  }

  const p1 = document.getElementById("p1");
  p1.onclick = test1;
</script>

4~6行目は、test1という関数です。
8行目は、getElementByIdメソッドで1行目を指定しています。
9行目は、関数test1をイベントハンドラのonclickに登録しています。
結果、1行目をクリックすると4~6行目の関数が実行されます。

引数にeventを指定する

引数にeventを指定するサンプルです。

<input type="button" value="ボタン1" onclick="test1(event)">

<script>
function test1(e){
	console.log(e.target);
	//<input type="button" value="ボタン1" onclick="test1(event)">

	console.log(e.type); //click
}
</script>

1行目は、onclickのメソッドの引数にeventを指定しています。eventのプロパティを取得したい場合は、この文字以外では動きません。
5行目は、targetプロパティを指定しています。クリックした箇所の1行が表示されます。6行目のコメントの内容です。
8行目は、typeプロパティを指定しています。発生したイベントの名前を表示します。clickイベントなのでclickと表示されます。

引数にthisを指定する

引数にthisを指定するサンプルです。

<input type="button" value="ボタン1" onclick="test1(this)">
<p>a</p>
<script>
function test1(obj){
  console.log(obj);
  //<input type="button" value="ボタン1" onclick="test1(this)">

  console.log(obj.nextElementSibling); 
  // <p>a</p>
}
</script>

1行目は、onclickのメソッドの引数にthisを指定しています。
その場合、6行目のように現在押した箇所の一行を取得できます。
取得した値は8行目のようにnextElementSiblingなどで他の行に移動できます。
JavaScript nextElementSibling DOMで次に移動

引数のthisにidやvalueを指定する

引数のthisにidやvalueなど個別にかつ複数指定することができます。

<input type="button" id="b1" value="ボタン" onclick="test1(this.id,this.value)">

<script>
function test1(a,b){
	console.log(a); // b1
	console.log(b); // ボタン
}
</script>

1行目は、onclickのメソッドの引数にthis.idとthis.valueを指定しています。
5行目は、1行目のidの値である「b1」が表示されます。
6行目は、1行目のvalueの値である「ボタン」が表示されます。

関連の記事

JavaScript イベントとイベントハンドラのサンプル

△上に戻る