[JavaScript] ボタンクリックイベントを強制的に起こす

投稿日：2016年10月10日更新日：2018年5月2日

ボタンクリックイベントをJavaScriptから強制的に発生させるには、ボタンオブジェクトのclick()を呼び出します。

サンプルソース

例）ボタン２を押すと、ボタン１のクリックイベントを発生させる

//ボタン１をクリックした時の処理
function btn1Click(){
  alert('ボタン１がクリックされました');
}
//ボタン２をクリックした時の処理
function btn2Click(){
  document.getElementById("btn1").click();
}

//ボタン１をクリックした時の処理

function btn1Click(){

alert('ボタン１がクリックされました');

}

//ボタン２をクリックした時の処理

function btn2Click(){

document.getElementById("btn1").click();

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン１" onclick="btn1Click();" />
  <input type="button" id="btn2" value="ボタン２" onclick="btn2Click();" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

ボタン２をクリック時は、ボタン１のクリック処理を呼び出しています。

解説

上記の例だと、ボタン１のclickイベントで呼び出しているbtn1Click()を直接呼び出しても同じ動きにはなりますが、ボタン１を押したのと同じ動きにしたいという仕様でコーディングするのであれば、ボタン１のclickイベントを呼び出すのがベターです。

執筆者：とら