質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1058閲覧

Googleの自作拡張機能でDOMが取得できない問題

meuar

総合スコア18

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/01/26 03:37

はじめまして。自作でGoogleの拡張機能を製作しています。
そこでEventListenerの中である要素を取得したいんですが、取得できません。
その原因と解決策をご回答いただけたら幸いです。

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

拡張機能の「自動いいね開始」ボタンを押下したら、あるWebサイトのいいねボタンを取得したいが、なぜか取得できずにnullが返却される。
EventListenerの外で取得するとちゃんと取得される。
逆にEventListener内だと要素が取得できずにnullが返却されてしまう

該当のソースコード

javascript

1// インターバルの時間(ミリ) 2const INTERVAL = 500; 3 4// タイムアウトになるまでの最大処理回数 5const TIMEOUT_LIMIT = 5; 6 7document.addEventListener("DOMContentLoaded", function() { 8 document.getElementById("autoGoodBtn").addEventListener("click", function() { 9 let notice = ""; 10 // TODO: もし不具合で無限ループ入ったらえぐいから入れとく。 11 let testCnt = 0; 12 let exec_num = 0; 13 14 while (true) { 15 // ボタンを取得 16 let btnType = document.getElementById("btnType"); 17 18 // ボタンが取得できていなかったら処理を終了する 19 if (btnType == null) { 20 notice = `処理が完了しました。今回処理した件数は「${exec_num}件」です`; 21 break; 22 } 23 24 // 処理回数 25 let timeoutCnt = 0; 26 27 let timerId = setInterval(() => { 28 let wait = document.querySelector(".wait"); 29 30 // waitが消えていたらいいねをクリック 31 if (wait == null) { 32 btnType.click(); 33 exec_num++; 34 clearInterval(timerId); 35 } else { 36 timeoutCnt++; 37 } 38 39 // タイムアウト 40 if (TIMEOUT_LIMIT <= timeoutCnt) { 41 notice = "タイムアウト:ネットワーク状況が悪いようです。"; 42 clearInterval(timerId); 43 } 44 }, INTERVAL); 45 46 // TODO: もし不具合で無限ループ入ったらえぐいから入れとく。 47 if (50 < testCnt) { 48 alert("無限ループ入ったで"); 49 break; 50 } 51 } 52 53 // logを出力 54 document.getElementById("log").innerHTML = notice; 55 }); 56}); 57

html5

1<html lang="en"> 2 <head> 3 <meta charset="UTF-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 6 <style> 7 body { 8 width: 100px; 9 } 10 </style> 11 </head> 12 <body> 13 <button id="autoGoodBtn">自動いいね開始</button> 14 <div> 15 <h2>ログ</h2> 16 <div id="log"></div id="log"> 17 </div> 18 <script src="autoGood.js"></script> 19 </body> 20</html> 21

ご回答よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

EventListenerの外で取得するとちゃんと取得される。

逆にEventListener内だと要素が取得できずにnullが返却されてしまう

この状況からは、「スコープ」を意識すれば対応できると思います。

他、気になった点
setInterval で 擬似的なループを実現できます。
while ループは不要ですね。


「あるWebサイトのいいねボタン」に対して、連続で click() は、諸刃の剣で済むとは思えません。
どちらかというと、「ハイリスク・ノーリターン」な気がします。

投稿2020/01/26 22:44

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

EventListener内で即時関数$(function(){})で囲ってみてはどうでしょう

投稿2020/01/26 04:46

mote

総合スコア128

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問