スタック・オーバーフロー Asked on December 6, 2020
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と言う引数が宣言していないのに何処から来て何を参照しているのか気になります。
イベント移譲と呼ばれる、共通の祖先に対してイベントハンドラを登録する方法を用いることで、今回のように要素が動的に追加される場合に対応出来ます。次のコードではコンソールへ入力された内容を出力するだけとなっていますが、この部分で適宜 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>Correct answer by supa on December 6, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP