JavaScriptでのonclickの使い方とは？基本的な使い方から複数の関数の実行方法まで徹底解説！

Javascript
プログラミング言語

公開日時: 2021-03-12 　更新日時: 2021-10-20

JavaScriptでのonclickの使い方とは？基本的な使い方から複数の関数の実行方法まで徹底解説！

この記事でわかること

システム エンジニア: JavaScriptでのonclickの使い方について教えていただけますか。

プロジェクト マネージャー: それでは、JavaScriptでのonclickの使い方について、基本的な使い方から複数の関数の実行方法についてご紹介しましょう。

JavaScriptでのonclickの使い方とは？

今回は、JavaScriptでのonclickの使い方について説明します。onclickを使うと、クリック時のイベントを実行できます。基本的な使い方から、引数の使い方や、動的にイベントを追加する方法について紹介します。また、onclickで複数の関数を実行する方法についても紹介します。

JavaScriptでのonclickの使い方に興味のある方はぜひご覧ください。

基本的な使い方

onclickの基本的な使い方を紹介します。HTMLに以下のようにonclickを指定します。

<input type="button" value="button" onclick="test()">

1	<input type="button" value="button" onclick="test()">

JavaScriptは以下のように記述します。

function test(){
        alert("test");
}

function test(){

alert("test");

}

実行結果は以下のようになります。ボタンをクリックすると、alertが表示されます。

See the Pen
JavaScript_onclick1 by kskumd (@kskumd)
on CodePen.

onclickで指定した関数が実行されていることが分かります。

引数の使い方

onclickで引数（event/this）を指定する方法を紹介します。HTMLは以下のように記述します。

<input type="button" id="btn1" value="button1" onclick="test1(event)">
<input type="button" id="btn2" value="button2" onclick="test2(this)">
<input type="button" id="btn3" value="button3" onclick="test3(this.id, this.value)">
<input type="button" id="btn4" value="button4" onclick="test4(this)">

JavaScriptは以下のように記述します。

// 引数event
function test1(event){
        alert(event.type);
}

// 引数this
function test2(obj){
    // idやvalueを取得可能
    alert(obj.id);
    alert(obj.value);
}

// 引数this
function test3(myid, myvalue){
        alert(myid);
        alert(myvalue);
}

// 引数thisを使ってvalueやstyleを変更
function test4(obj){
  // buttonのvalueがbutton4の場合
  if(obj.value == "button4"){
    // buttonのvalueとstyleを変更
          obj.value = "test4";
    obj.style.color = 'blue';
  }else{
    // buttonのvalueとstyleを変更
          obj.value = "button4";
    obj.style.color = 'black';
  }
}

// 引数event

function test1(event){

alert(event.type);

}

// 引数this

function test2(obj){

// idやvalueを取得可能

alert(obj.id);

alert(obj.value);

}

// 引数this

function test3(myid, myvalue){

alert(myid);

alert(myvalue);

}

// 引数thisを使ってvalueやstyleを変更

function test4(obj){

// buttonのvalueがbutton4の場合

if(obj.value == "button4"){

// buttonのvalueとstyleを変更

obj.value = "test4";

obj.style.color = 'blue';

}else{

// buttonのvalueとstyleを変更

obj.value = "button4";

obj.style.color = 'black';

}

実行結果は以下のようになります。

See the Pen
JavaScript_onclick2 by kskumd (@kskumd)
on CodePen.

複数関数の実行

onclickで複数の関数を実行するには、;で区切ります。HTMLは以下のように記述します。

<input type="button" value="button" onclick="test1();test2()">

1	<input type="button" value="button" onclick="test1();test2()">

JavaScriptは以下のように記述します。

// 1つ目に実行される関数
function test1(){
        alert("test1");
}

// 2つ目に実行される関数
function test2(){
        alert("test2");
}

// 1つ目に実行される関数

function test1(){

alert("test1");

}

// 2つ目に実行される関数

function test2(){

alert("test2");

}

実行結果は以下のようになります。

See the Pen
JavaScript_onclick3 by kskumd (@kskumd)
on CodePen.

「;」区切りで指定した複数の関数が実行されていることが分かります。

イベントを動的に追加

イベントを動的に追加する方法を紹介します。HTMLは以下のように記述します。

<input type="button" id="btn1" value="button1" onclick="test1()">
<input type="button" id="btn2" value="button2">

1 2	<input type="button" id="btn1" value="button1" onclick="test1()"> <input type="button" id="btn2" value="button2">

JavaScriptは以下のように記述します。

function test1(){
  alert("button2にclickイベントが追加されました。");
        target = document.getElementById("btn2");
  target.addEventListener("click", test2, false);
}

function test2(){
  alert("test2");
}

function test1(){

alert("button2にclickイベントが追加されました。");

target = document.getElementById("btn2");

target.addEventListener("click", test2, false);

}

function test2(){

alert("test2");

}

実行結果は以下のようになります。「button1」ボタンをクリックする前に「button2」ボタンをクリックしても何も起きませんが、「button1」ボタンのクリック後に「button2」ボタンをクリックすると、設定したイベントが実行されます。

See the Pen
JavaScript_onclick4 by kskumd (@kskumd)
on CodePen.

動的に追加した要素にイベント追加

動的に追加した要素に対して、イベントを追加する方法を紹介します。HTMLは以下のように記述します。

<div id="parent">
  <input type="button" value="button add" onclick="addButton()"><br>
</div>

</div>

JavaScriptは以下のように記述します。

// 親要素の取得
var parent = document.getElementById("parent");

var idx = 1;

// onclick時の関数
function addButton() {
  // 要素を作成
  var element = document.createElement("button");
  // 要素のidとvalueを設定
  element.id = "new_button" + idx;
  element.innerText = "new button" + idx;

  // インデックスのインクリメント
  idx++;
  
  // 要素にクリックイベントを追加
  element.onclick = function() {
    alert("click!");
  };

  // 要素を追加
  parent.appendChild(element);
}

// 親要素の取得

var parent = document.getElementById("parent");

var idx = 1;

// onclick時の関数

function addButton() {

// 要素を作成

var element = document.createElement("button");

// 要素のidとvalueを設定

element.id = "new_button" + idx;

element.innerText = "new button" + idx;

// インデックスのインクリメント

idx++;

// 要素にクリックイベントを追加

element.onclick = function() {

alert("click!");

};

// 要素を追加

parent.appendChild(element);

}

実行結果は以下のようになります。「button add」ボタンをクリックすると、新しいボタンが追加されます。追加されたボタンをクリックすると、設定したイベントが実行されます。

See the Pen
JavaScript_onclick5 by kskumd (@kskumd)
on CodePen.

システム エンジニア: JavaScriptでのonclickの使い方がよく分かりました。

プロジェクト マネージャー: ご紹介したソースコードを参考に、ご自身でもソースコードを書いてみてください。

まとめ

いかがでしたでしょうか。JavaScriptでのonclickの使い方について説明しました。onclickを使うと、クリック時のイベントを実行できます。基本的な使い方から、引数の使い方や、動的にイベントを追加する方法について紹介しました。また、onclickでは、「;」で区切れば、複数関数を実行することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのonclickの使い方とは？基本的な使い方から複数の関数の実行方法まで徹底解説！

JavaScriptでのonclickの使い方とは？

基本的な使い方

引数の使い方

複数関数の実行

イベントを動的に追加

動的に追加した要素にイベント追加

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptでのonclickの使い方とは？基本的な使い方から複数の関数の実行方法まで徹底解説！

JavaScriptでのonclickの使い方とは？

基本的な使い方

引数の使い方

複数関数の実行

イベントを動的に追加

動的に追加した要素にイベント追加

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでのforEach文の使い方をご紹介！

jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

JavaScriptでのwhileの使い方とは？繰り返し処理の基本的な使い方からソースコードを交えて解説！