Implementing a “copy to clipboard” button#

1
var ta = document.querySelector("textarea");
2
var button = document.querySelector("button");
3
button.onclick = () => {
4
    ta.select();
5
    document.execCommand("copy");
6
};

1
<div>
2
<textarea class="copyable">{{ copyable }}</textarea>
3
<p class="raw-link"><a href="{{ raw_link }}">Raw data</a></p>
4
</div>
5

6
<script>
7
var ta = document.querySelector("textarea.copyable");
8
var p = document.querySelector("p.raw-link");
9
var button = document.createElement("button");
10
button.className = "copyable-copy-button";
11
button.innerHTML = "Copy to clipboard";
12
button.onclick = () => {
13
    ta.select();
14
    document.execCommand("copy");
15
    button.innerHTML = "Copied!";
16
    setTimeout(() => {
17
        button.innerHTML = "Copy to clipboard";
18
    }, 1500);
19
};
20
p.appendChild(button);
21
p.insertAdjacentElement("afterbegin", button);
22
</script>