Помогите со скриптом копирования текста js html

Question

Есть код который по нажатию копирует текст в блоке своего класса.

<div class="sku">Текст, который копируем по клику на этот блок</div>

const sku = document.querySelector(".sku");

async function skuCopyClick(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch (error) {
    console.error("Что то пошло не так: ", error);
  }
}

if (sku !== null) {
  sku.addEventListener("click", (e) => {
    
    console.log(e);
    
    skuCopyClick(e.target.innerText);

    const myNotice = document.createElement("p");
    myNotice.innerText = "Скопировано!";
    myNotice.style.color = "red";

    if (sku.parentElement) {
      const parentElement = sku.parentElement;
      parentElement.appendChild(myNotice);

      window.setTimeout(function () {
        parentElement.removeChild(myNotice);
      }, 2000);
    } // TODO else 

    //console.log(parentElement);
  });
}

А нужно размножить количество блоков и чтобы копировало по клику то, что в этом блоке. Возможно у кого есть готовое решение, не обязательно этот код пилить, может есть другой.

Заранее спасибо. Заранее благадарен.

Answer 1

нужно размножить количество блоков и чтобы копировало по клику то, что в этом блоке.

Предложу такой вариант... Только тут в песочнице возможно не даст копировать.

document.querySelectorAll(".sku")?.forEach(sku => {
    sku.addEventListener("click", fnc(sku));
});
async function skuCopyClick(text) {
    try {
        await navigator.clipboard.writeText(text);
        return 1
    } catch (error) {
        //console.error("Что то пошло не так: ", error);
        return 2
    }
}

function fnc(sku) {
  const arr = ['Есть проблема', "Скопировано!", 'Нет текста']
    return async e => {
        let v = e.target.innerText
        v = v ? await skuCopyClick(v): 2;
        const myNotice = document.createElement("p");
        myNotice.innerText = arr[v];
        myNotice.style.color = "red";
        sku.insertAdjacentElement('afterend', myNotice)
        setTimeout(_ => myNotice.remove(), 2000);
    }
}

.sku {
  padding: 10px;
  border: 1px solid;
}

<div class="sku">Текст 1, который копируем по клику на этот блок</div>
<div class="sku">Текст 2, который копируем по клику на этот блок</div>
<div class="sku"></div>
<div class="sku">Текст 3, который копируем по клику на этот блок</div>
<div class="sku">Текст 4, который копируем по клику на этот блок</div>

БЛОГ НА HUSL

Помогите со скриптом копирования текста js html

Ответы (1 шт):