Я не могу понять, что не так с моими имплементациями HTML и jQuery

Question

Я новичок в HTML и jQuery, и это, вероятно, глупый вопрос, но, поверьте мне, я перепробовал все, что кажется мне разумным.

Итак, я делаю сайт который был предварительно собран для моего сервера m c. Он использует файлы .twig, которые имеют смысл. Моя цель - добавить кнопку, которая при нажатии копирует IP-адрес сервера в буфер обмена. Я нашел этот код в Интернете по этой ссылке: https://codepen.io/shaikmaqsood/pen/XmydxJ, и он должен работать. Я скопировал кнопку HTML и вставил ее в свой заголовочный файл:

<button onclick="copyToClipboard('ip')">IP</button>

The jS Я пробовал несколько способов. Я попытался создать новый файл jS и использовать '' А также создать фактический блок:

<script>
function copyToClipboard(element) {
   var $temp = $("<input>");
   $("body").append($temp);
   $temp.val($(element).text()).select();
   document.execCommand("copy");
   $temp.remove();
}
</script>

Однако всякий раз, когда я нажимаю кнопку, он ничего не копирует. Я демонстративно делаю что-то не так и буду благодарен за любую помощь. Спасибо!.

Это то, что у меня есть:

<button id="copyButton" onclick="copyToClipboard()">ip.adress.net</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
let copyButton = document.getElementById("copyButton");

function copyToClipboard() {
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(copyButton.innerText).select();
    document.execCommand("copy");
    $temp.remove();
}
</script>

ОБНОВЛЕНИЕ: я попробовал редактор Tryit, и этот код работает отлично, однако по какой-то причине его нет на моем веб-сайте и я так потерялся сейчас ...

Answer 1

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

Решение-

<script>
let copyButton = document.getElementById("copyButton");

function copyToClipboard() {
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(copyButton.innerText).select();
    document.execCommand("copy");
    $temp.remove();
}
</script>

---

Я также нашел другой подход-

const copyToClipboard = str => {
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    };
};

если вы искали другой подход, просто замените свою функцию на функцию, указанную выше ...

---

это было найдено здесь - https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript

Надеюсь, это поможет! удачи в программировании

Answer 2

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

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>

у вас отсутствует # , который представляет идентификатор элемента html.