Google Chrome のツール Console を使用してWebサイトのクリックイベントを発生させたい

Google Chrome のツール Console を使用してWebサイトのクリックイベントを発生させてフォームへ値を入力

Google Chrome の開発ツール Console を使用して、Webサイト内のフォームに値を入力したく JavaScript でコードを作成し実行しています。クリックイベントの必要のないところでは、値を入力できるのですが、クリックイベントが必要な箇所で、下記のコードを Console に入力し実行しましたが、クリックイベントが発生しません。つきましては、原因をご教示いただければと思います。

発生している問題・エラーメッセージ

下記URLのサイト内のカテゴリボタンを押すクリックイベントが発生しない。
Console へコードを入力し実行すると undefined と表示され、クリックイベントは発生しません。

該当のソースコード

以下のサイト内でChrome の開発ツール Console を使用してカテゴリボタンを押すクリックイベントを試みています。

URL
1https://www.catawiki.com/

試したこと

以下のコードを入力し試してみました。

JavaScript
1document.getElementsByClassName('c-header__all-auctions__drop-menu')[0].click();

上記以外にも該当しそうな Class や Id を入力して試してみましたが、クリックイベントは発生しませんでした。

補足情報

以下のサイトに掲載されていた方法を基にしました。
https://qiita.com/igara/items/6e5e59b0c0129069c334

このサイトで紹介されていた方法をQiita内で試したところ成功しました。

以下、赤枠内のクリックイベントについても発生させる事ができませんでした・・・

クリックする前のコードは、以下のようになります。

HTML
1<div class="u-align-rounded-corner">
2<div class="Select se-specifics-select error is-clearable is-searchable Select--single"><div class="Select-control">
3<span class="Select-multi-value-wrapper" id="react-select-2--value"><div class="Select-placeholder">e.g. Ash, Maje, Malo</div>
4<input id="specification-3184" aria-activedescendant="react-select-2--value" aria-expanded="false" aria-haspopup="false" aria-owns="" class="Select-input" role="combobox" tabindex="0" type="search" autocomplete="false" autocorrect="off" autocapitalize="off" spellcheck="false" value=""></span>
5<span class="Select-arrow-zone"><span class="Select-arrow"></span></span></div>
6</div>
7</div>

赤枠内をクリックすると画像のようにコンボボックス（？）が表示されます。

コードはコピーできませんでした・・・

上記の部分に「is-open」というコードが追記されるところまでは分かったのですが、javascriptを使用してクリックイベントを発生させるためのコードがどうしても分かりません。

行動規範の内容に同意します

回答1件

ベストアンサー

divにonclickの記述があればよいのではないでしょうか？

html
1<div class="c-header__all-auctions__drop-menu" onclick="alert('hoge')">

投稿2020/07/25 10:48

shark911

総合スコア13

onioonioonio

2020/07/25 11:15

ご回答ありがとうございます。やりたい事について補足しますと、下記サイト内のカテゴリボタンを押すという行為をブラウザの chrome にある consoleを使用して JavaScript でコードを入力して実行したいのです。（詳細な方法は、補足情報に載せているURL内の方法を参考にしました。）ご教示いただいた onclick の記述をHTML内にないか探してみましたが、該当のサイト内には見つかりませんでした。・対象サイト https://www.catawiki.com/

shark911

2020/07/25 12:42

すみません。自分も詳しくはないのですが、Qiitaのはiタグの'fa fa-search'にonclickイベントが定義されているんじゃないでしょうか？対象サイトの左上にある Categories▼を開いた状態にしたいというのであれば、マウスをあてるとopenのクラスが増えたので下記のようにすれば開いた状態にはなると思います。 document.getElementsByClassName('c-header__all-auctions__drop-menu')[0].classList.add('open');

onioonioonio

2020/07/26 08:34

希望した通りの動きを確認できました！ありがとうございます！もしよろしければ、もう一点うまく動かないところがありまして… 補足事項に追記させていただきますので、ご教示いただけないでしょうか？

shark911

2020/07/26 23:33

補足されたのがどこのサイトのものなのか確認できなかったのですが、結局、そのオブジェクトがclickイベント処理を持っているかどうかだと思います。見た目でそこを押してるから、そこにclickイベント処理が書かれているはずと思い込むと、Categoriesのように実はcssで見せていただけとかがあるので、そういった点に注意して追ってみてはいかがでしょうか？ <p class="aaa" >onclickイベントなし</p> <p class="bbb" onclick="alert('test');">onclickイベントあり</p> document.getElementsByClassName('aaa')[0].click();　…動作しない document.getElementsByClassName('bbb')[0].click();　…動作する

onioonioonio

2020/07/27 03:56

ありがとうございます！確認してみます！

行動規範の内容に同意します