Как сделать кнопку копировать в буфер обмена?

Question

[Bart Simpson]

Добрый день!
У меня есть блок куда генерируется некий текстовый контент и мне нужно реализовать кнопку копировать но вылазит ошибка
Uncaught TypeError: result.select is not a function
at copyResult (script.js:60)
at HTMLButtonElement.onclick (index.html:15)
В чем может быть ошибка ?
Вот код https://codepen.io/IvaLu/pen/XWaypGM

Answer 1

[Сергей delphinpro]

<div class="option">
  <div id="result">TextContent</div>
  <button id="copy">Copy</button>
</div>

let result = document.getElementById("result");

let copy = document.getElementById("copy");

copy.addEventListener("click", function () {
  copyToClipboard(result.innerText);
});

function copyToClipboard(text, onComplete) {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        if (typeof onComplete === "function") onComplete();
      })
      .catch((err) => {
        console.error("Copy fail", err);
      });
  } else {
    let area = document.createElement("textarea");
    document.body.appendChild(area);
    area.value = text;
    area.select();
    document.execCommand("copy");
    document.body.removeChild(area);
    if (typeof onComplete === "function") onComplete();
  }
}

В песочнице работать не будет

Comments

[Bart Simpson]

Копирует undefined

[Сергей delphinpro]

Ivan Lunin, Этот код использую давно. Он работает как надо.
Ищите, почему у вас undefined. Это называется "отладка" =)

[Bart Simpson]

Сергей delphinpro, понял, спасибо!

[Bart Simpson]

Сергей delphinpro, нашел ошибку.

Answer 2

[Владимир Солнцев]

Как-то так можно:

//...
	function copyResult() {
	    navigator.clipboard.writeText(result.textContent)
                .then(() => console.log('Done'))
                .catch((err) => console.log(err))
	}