0

Javascriptを勉強しているのですが、下記の要素に上手くaddEventListnerを適応したいです。

分からない事
同じクラス名の要素に別々の変更を加えるには

作成したい機能
inputにurlの入力があったらurlを元にサムネイルを取得してimgタグ内にサムネイルのurlを挿入します。

要素について
.dlcardWrapがあってその子要素として.dlcardがあります。ページ内にaddボタンがあり、クリックを押すと.dlcardの要素が丸々追加されます。
最初のデフォルトである2つの.dlcard > .dlcard__url > inputさらにaddボタンで追加される要素それぞれ別々のサムネイルを取得して挿入するにはどのようにコードを書いたら良いでしょうか?nth-of-type等が使用出来そうですが、どのように使用したら分からないです。
詳しい方、教えて頂けないでしょうか?

<div class="dlcardWrap">
    <div class="dlcard">
        <div class="dlcard__title">テスト</div>
        <div class="dlcard__thumbnail"><img src="#" alt=""></div>
        <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
    </div>
    <div class="dlcard">
        <div class="dlcard__title">テスト</div>
        <div class="dlcard__thumbnail"><img src="#" alt=""></div>
        <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
    </div>
</div>

追記
elmと言う引数が宣言していないのに何処から来て何を参照しているのか気になります。

1 件の回答 1

0

イベント移譲と呼ばれる、共通の祖先に対してイベントハンドラを登録する方法を用いることで、今回のように要素が動的に追加される場合に対応出来ます。次のコードではコンソールへ入力された内容を出力するだけとなっていますが、この部分で適宜 URL のバリデーションや画像の取得処理などを行うことで、質問者さんの期待している動作が実現出来ると思います。

document.querySelector("button").addEventListener("click", function () {
  const dlcardWrap = document.querySelector(".dlcardWrap");
  const template = document.querySelector("template");
  const clone = template.content.firstElementChild.cloneNode(true);
  clone.querySelector(".dlcard__title").textContent = "追加されたボタン";
  dlcardWrap.appendChild(clone);
}, false);

document.querySelector(".dlcardWrap").addEventListener("blur", function (elm) {
  const input = elm.target;
  if (input.parentElement.classList.contains("dlcard__url")) {
    console.log(`入力されたURL: ${input.value}`);
    // 画像の取得処理など。
  }
}, true);
<div class="dlcardWrap">
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
</div>

<button type="button">追加</button>

<template>
  <div class="dlcard">
    <div class="dlcard__title">テスト</div>
    <div class="dlcard__thumbnail"><img src="#" alt=""></div>
    <div class="dlcard__url"><input type="url" name="url01" size="18" placeholder="URL:https://"></div>
  </div>
</template>

3
  • 回答ありがとうございます。こんな方法があるとは知りませんでした。そのClickされたinputのURLを元にthumbnailのurlを取得して同じ階層のdlcard_thumbnailのsrcに渡したいのですがどのように要素を取得したら良いか教えて頂けないでしょうか?
    – wataru
    Commented 2020年11月12日 3:43
  • 新しく質問を立てました。よろしくお願いします。ja.stackoverflow.com/questions/71888/…
    – wataru
    Commented 2020年11月12日 9:06
  • 解決済みすいません。elmは一体何処から来たのでしょうか?addEventListnerのオプションか何かでしょうか?それともtargetによるものなのでしょうか?宣言していないelmが突然出てくるのが不思議です。
    – wataru
    Commented 2020年11月21日 14:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。