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

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

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

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

構文

element.click()

サンプルコード

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

See the Pen click() test1 by Nakamoto (@programmerlife) on CodePen.

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

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

See the Pen click() test2 by Nakamoto (@programmerlife) on CodePen.

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

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

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

おわり

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

参考

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/click