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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

203閲覧

JavaScript 複数のイベント登録がわからない

van-0215

総合スコア89

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/29 02:51

編集2018/09/29 03:18

JavaScriptのイベント登録について質問です!

今、 hogeページに遷移したら、hogeページ内のボタンhogehogeをクリックするというJSコードを書いています。

しかしながら、DOM生成ができていないとのことで hogehogeをクリックすることが (たまに) できません。

そこで、 hogeページに遷移後、

javascript

1document.addEventListener("load", () => { 2 document.getElementById("hogehoge").click() 3}, false);

javascript

1document.addEventListener("DOMContentLoaded", () => { 2 document.getElementById("hogehoge").click() 3}, false)

の2つを試して見ました。
①の場合、clickがされませんでした。 エラーは出ませんでした。
②の場合、clickをしようとすると、 clickしようとしているものが null ですよ。とエラーが出ました。

どうすればやろうとしている挙動を実現することができるのでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

①document.addEventListener("load", document.getElementById("hogehoge").click() )
②document.addEventListener("DOMContentLoaded", document.getElementById("hogehoge").click() )

addEventListener の第二引数は「関数オブジェクト」、もしくは「handleEvent メソッドを持つオブジェクト」でなくてはなりません。
第三引数は後方互換性の為に、省略しない事をお勧めします。

JavaScript

1document.addEventListener("load", function handleLoad () { 2 document.getElementById("hogehoge").click(); 3}, false); 4 5document.addEventListener("DOMContentLoaded", function handleDOMContentLoaded () { 6 document.getElementById("hogehoge").click(); 7}, false);

2018/09/29 12:25追記

javascript

1document.addEventListener("DOMContentLoaded", () => { 2 document.getElementById("hogehoge").click() 3}, false)

②の場合、clickをしようとすると、 clickしようとしているものが null ですよ。とエラーが出ました。

document 上に id="hogehoge" の要素が存在しない為です。
目標としている要素のid属性値の指定が誤っているか、iframe要素等の別のdocument上の要素ノードを指定しようとしている可能性があります。

Re: van-0215 さん

投稿2018/09/29 03:14

編集2018/09/29 03:25
think49

総合スコア18156

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

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

van-0215

2018/09/29 03:19

ご指摘、ありがとうございます! 質問を修正いたしました。
think49

2018/09/29 03:26

追記しました
think49

2018/09/29 03:30

ああ、あとは非同期処理で挿入されている要素ノードの可能性もありますね。 MutationObserver で捕捉可能ですが、コストが高いので、DOM挿入時に追加処理を入れるのがお勧めです。
guest

0

jQueryを使っているならば、次の書き方でページの読み込み完了まで待ってくれます。

jQuery

1$(function () { 2 // ここに処理を書く 3});

なので、これでどうでしょう。

jQuery

1$(function () { 2 document.getElementById("hogehoge").click() 3});

投稿2018/09/29 02:59

takey

総合スコア312

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

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

van-0215

2018/09/29 03:05

・ $(function(){  やること  }); ・ document.addEventListener('DOMContentLoaded', function(){   やること   }, false); ただ、javascriptかjQueryライブラリかという違いで、両者ともreadyのような気がするのですが、そうではないのでしょうか?
maisumakun

2018/09/29 03:11

元のコードではイベントハンドラを囲むfunctionがないので、その違いかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問