JavaScriptとonclickのサンプル

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

目次

onclick onclickの動作
  onclickをJavaScriptの中に書く
引数 引数に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をJavaScriptの中に書く

onclickをJavaScriptの中に書くサンプルです。

<input type="button" id="b1" value="ボタン1" >

<script>
document.getElementById("b1").onclick = function(){
	console.log("test1"); //test1
}
</script>

1行目には、onclickの文言がありません。
4行目は、getElementByIdメソッドで1行目のidであるb1を指定しその後に.onclickがあります。
1行目のボタンをクリックすると5行目が実行されコンソールにtest1と表示されます。

引数に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)">

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

1行目は、onclickのメソッドの引数にthisを指定しています。
その場合、6行目のように現在押した箇所の一行を取得できます。
ここからjQueryのparent()などで他の行に移動して操作することができます。

引数の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 イベントとイベントハンドラのサンプル

△上に戻る