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

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

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

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

Q&A

1回答

668閲覧

動的に追加される要素を取得する方法についてお伺いします。

nanoion3co

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2018/10/13 10:15

編集2022/01/12 10:55

実現したいこと

ユーザーの操作により、動的に追加される要素を取得する場合についてお伺いします。

通常の document.getElementById() などでは読み込まれた際の情報しか取得できないのですが、ユーザーの操作により追加される要素を取得する場合だとどの様にすれば良いのでしょうか。

<input id="elem" type="text" /> <!-- ここにid addelem0(n)-errorが追加される -->

追加される要素の addelem0(n)-errorを取得したいのですが、、

let apd = document.getElementById('addelem0(n)-error'); console.log(apd);

上述の様に、ページが読み込まれたタイミングではなく要素が追加・削除されたタイミングで取得をしたいです。

どの様にすれば addelem0(n)-errorを取得できるのかご指導頂ければと思います。
よろしくお願いいたします。

追記です。

ご回答ありがとうございます。
説明不足でしたすみません。
addelem0(n)-error 要素を書き出す コード(既存コード)は別にあって、ユーザーの操作によって追加されたり非表示(display:none)にされたりするのですが、
これを今回別のコードから取得する形になります。

上記のコードだとページが読み込まれた何もない状態(Null)が取得されますよね。。
こちらをaddelem0(n)-error 要素が追加・削除される際取得したいです。

ソースコードは、サンプルページと、少し長くなってしまいますがこちらに既存コードも一応載せておきます。
このフォームをブランクのままフォーカスを外したときに表示される label要素を取得したいです。

###サンプルページ
http://app.liz.blue/jstest/valid/

###HTML

<div class="parent"> <form class="formbase" action="action.php" method="post" id="mail-form" novalidate="novalidate"> <dl class="item-container table elempar3"> <dd class="item-minbox cell"> <div class="with-validate sellabel"> <span id="elemtxt" class="elemtxt"> <input id="addelem01" class="validating1" type="text" name="名まえ" placeholder="例)なの"> <!-- ここに取得したい要素が入ります --> </span> <span id="elemtxt" class="elemtxt"> <input id="addelem02" class="validating2" type="text" name="ねんれい" placeholder="例)18"> <!-- ここに取得したい要素が入ります --> </span> </div> </dd> </dl> </form> </div>

###Javascript(既存コード)
こちらのコードによって書き出される要素を取得します。
要素の取得は別のコードから行い、このコードの編集はしません。

(function($){ $.extend($.validator.messages, { required: "必須項目です。", email: "メールアドレスは正しい形式で入力して下さい。", phone: "電話番号は数字で入力して下さい。", }); var methods = { phone: function(val, ele){ return this.optional(ele) || /^\d{10}|\d{11}$/.test(val); } }; $.each(methods, function(key, callback){ $.validator.addMethod(key, callback); }); $(function(){ var emptyBgFunc = function(ele){ var bgVal = ( String( $(ele).val() ) === "" ) ? "#ffffff" : "#ffffff"; $(ele).css('background-color', bgVal); //$(ele).css('pargin-bottom', 40 + 'px'); }; var makeValidatingCls = function(idx){ //index + α のクラスを作る var cls = 'validating' + idx.toString(); return cls; }; var getValidatingCls = function(ele){ var cls = $(ele).attr('class').match(/(?:^|[ ])(validating[0-9]+)/); cls = (typeof cls === 'object' && typeof cls[1] !== 'undefined') ? cls[1] : ''; return cls; }; var errHiddenFunc = function(ele){ var $err = $(ele).next('.error'); if($err.length){ $err.css('display', 'none'); } }; var rules = {}, messages = {}, errTimeouts = {}; var $inputs = $(".with-validate :input"); var imeOffTypes = ['email', 'tel']; $inputs.each(function(idx){ $ipt = $(this); var type = $ipt.attr('type'); if( $.inArray(type, imeOffTypes) > -1 ){ $ipt.css('ime-mode', 'disabled'); } var name = $ipt.attr('name'); var rule = {}; switch(type){ case 'tel': rule = { phone: true, required: true }; message = { phone: name + "は数字のみ11桁(-ハイフンなし)で入力して下さい。", required: name + "を入力して下さい。", }; break; default: rule = { required: true }; message = { required: name + "を入力して下さい。", }; break; } rules[name] = rule; messages[name] = message; var cls = makeValidatingCls(idx); $ipt.addClass(cls); errTimeouts[cls] = false; emptyBgFunc($ipt.get(0)); $ipt.on('focusout', function(){ emptyBgFunc(this); }); $ipt.on('focus', function(){ errHiddenFunc(this); var cls = getValidatingCls(this); errTimeouts[cls] = false; }); }); var validator = $("#mail-form").validate({ rules: rules, messages: messages, onfocusout: function(ele, event){ validator.element(ele); var cls = getValidatingCls(ele); var timer = setTimeout(function(){ if(errTimeouts[cls] === timer){ errHiddenFunc(ele); } }, 5000); errTimeouts[cls] = timer; }, }); }); })(jQuery);

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/10/13 10:55

私が空のHTMLとChromeのデバッガで試した限りではできました。もし、ソースを別に分けておられたりするのであれば、その旨も書かれたほうがよいかと。
kei344

2018/10/13 11:23

書かれている状況が再現するコード(HTML/JavaScript)を提示されたほうが回答を得やすいと思います。
kei344

2018/10/13 12:08

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
nanoion3co

2018/10/13 12:34

コードブロックについて、見難くなってしまいすみません、編集しておきました。
kei344

2018/10/13 12:58

「addelemを取得」のコードはどこに入っているのでしょうか。
nanoion3co

2018/10/13 13:08

すみません、当初追記後の内容までは載せないつもりだったので、ID addelem は例としてあげさせて頂いていましたが、、こちらも編集しておきました。 取得したい要素は、addelem01-errorなど、 ”input要素のID” + ”-error”、となります。
kei344

2018/10/13 13:19

エラーが出たときにその内容を処理したい、ということでしょうか。それであればプラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
nanoion3co

2018/10/14 04:18

”errorクラス”を持つ要素が表示された場合それを取得したい、ということです。こちらのライブラリは参考のものであって今回は一切触れません。追記の説明にある通りです。
guest

回答1

0

追加される要素というのは、「***を入力して下さい」という部分だと思います。
この要素をデバッガで見てみたところ、idが"brt02-error"となっていました。
なので、"additem"というIDでは要素を取得できないと思います。

検証をライブラリに任せていて、そのライブラリが要素を追加しているのかな?と思います。
もしそうであれば、ライブラリのID命名規則を確認してみてください。

また用途によっては、classを指定して要素を取得することもできると思います。
classは"error"となっていました。

ライブラリの仕様は少し読み込んでみたほうがいいかもしれません。

投稿2018/10/13 12:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nanoion3co

2018/10/13 12:58

すみません、当初追記後の内容までは載せないつもりだったので、ID addelem は例としてあげさせて頂いていましたが、、こちらも編集しておきます。 取得したい要素は、addelem01-errorなど、 ”input要素のID” + ”-error”、となります。
退会済みユーザー

退会済みユーザー

2018/10/13 13:15

なるほど。追加された要素は出たり消えたりするので、消えたタイミングで取得しようとしてたりはしませんか?取得する部分がソースコードにあるとアドバイスできると思います。
退会済みユーザー

退会済みユーザー

2018/10/14 04:36

質問を読み返してみて思い直しました。ライブラリに要素が追加もしくは削除されたら、それを検知するような形で要素を取得したいということですね。一般にこういったことをしたい場合、ライブラリにコールバック関数を登録するなどするかと思います。そうでなければ、bodyや要素の親要素に要素を検知する仕組みを用意すればいいかと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問