iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript

JavaScriptでボタンのクリックを発生させるコードと実行結果

概要

通常ボタンはマウスポインタをボタンに重ねて左ボタンクリックすることでクリックします。または、スマートフォンの場合は指でボタンをタップしてクリックします。

一方で、JavaScriptのコードからボタンをクリックしたい場合もあります。この記事では、JavaScriptからボタンをクリックするコードを紹介します。

補足

一般的な実装では、ボタンのonclickイベントから呼び出される処理を関数として記述して実装し、JavaScriptのコードから関数を呼び出す方式がシンプルで理解しやすいコードですが、この記事では、ボタン自体をクリックをさせたい場合の処理を紹介します。

記述方法

ボタンの要素のオブジェクトをdocument.getElementById()メソッドで呼び出し、オブジェクトのclick()メソッドを呼び出すと、 JavaScriptのコードからボタンをクリックさせることができます。

実装

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script language="javascript" type="text/javascript">
    function OnButtonClick() {
      target = document.getElementById("output");
      target.innerHTML = "ボタンがクリックされました。";
    }

    function OnLinkClick() {
      target = document.getElementById("button1");
      target.click();
      return false;
    }
  </script>

</head>
<body>
  <h3>JavaScriptのコードからボタンをクリックする。</h3>

  <input id="button1" type="button" value="Exec" onclick="OnButtonClick();" /><br />
  <br />
  <div id="output"></div>
  <hr/>
  <a href="javascript:OnLinkClick();">処理実行</a>

</body>
</html>

解説

ボタンのクリックイベントです。output要素に「ボタンがクリックされました。」のメッセージを出力します。

    function OnButtonClick() {
      target = document.getElementById("output");
      target.innerHTML = "ボタンがクリックされました。";
    }

リンクのクリックイベントです。ボタンの要素をgetElementById()メソッドで取得し、click()メソッドを呼び出しています。

    function OnLinkClick() {
      target = document.getElementById("button1");
      target.click();
      return false;
    }

ページにボタンを設置しています。クリック時にはOnButtonClick()関数を呼び出します。また、id属性を設定しています。

  <input id="button1" type="button" value="Exec" onclick="OnButtonClick();" /><br />

リンクを配置しています。リンククリックにより、OnLinkClick()関数を呼び出します。

  <a href="javascript:OnLinkClick();">処理実行</a>

実行結果

上記のHTMLファイルを表示します。下図のページが表示されます。

はじめに動作確認として、[Exec]ボタンをクリックします。「ボタンがクリックされました。」のメッセージが表示されます。

再度ページを読み込みます。[処理実行]のリンクをクリックします。

リンクをクリックすると、「ボタンがクリックされました。」のメッセージがページに表示されます。リンクのクリックにより、ボタンがクリックされ、ボタンのonclickイベントに記述した、OnButtonClick() 関数が呼び出され、ページにメッセージが表示される動作が正しく実行できていることが確認できました。