プログラムでボタンをクリックさせる！Javascript初心者の勉強

あらかじめ用意されていた便利なアプリケーションを使用してコードを書いていた時に、
初期表示時に隠しボタンを押してイベントを発生させる機会があったのでその時の備忘録です。

Contents

プログラムでボタンをクリックさせる方法

click()メソッドを使用することでプログラムでクリックを行うことが可能です。

element.click()

その名の通りですし、さほど難しくないですがせっかくなのでサンプルコードを用意しました。

ボタンには「onclick=”console.log(‘Clicked’)」が仕掛けられており、ボタンをクリックした時とページが読み込まれた時に、コンソールにclickedと表示されます。

上記サンプルだとわかりづらいので、疑似的にもう１つボタンを作成して１つボタンがクリックされたら両方ボタンがクリックされるサンプルコードを作成してみました。

左(Left)ボタンをクリックすると右のボタンの「onclick=”alert(‘Left Clicked but here is Right’);”」が実行されてアラートが表示されます。右のボタンはスタイルが適用されておりマウスでクリックすることはできない状態になっています。

codepenがばぐってしまったので、もしかしたら動かないかもしれませんがその場合はJSbinで動作を確認してみていただければと思います。

少しわかりづらいかったかもしれませんが、click()でボタンを簡単にクリックすることができることがわかるかと思います。

ユーザがボタンをクリックしなくてもボタンをクリックさせることができることに驚きました。
こんなこともできるのかと１つ勉強になりました。