如何修复javascript中的复制到剪贴板错误？

使用下面的代码，我有一个复制指定元素文本范围的函数，但是如果我在同一页面上有多个元素，并尝试使用两个按钮复制不同的元素，它总是只粘贴您单击的第一个元素

不确定我是否解释得很好，所以这里有一个例子：

A = abc

B = xyz

Button1 = CopyToClipboard('A')

Button2 = CopyToClipboard('B')

//If I clicked button1 then button2 I would get the contents of button1 (abc). 

两个按钮都可以工作，但单击一个按钮后，无法复制另一个按钮

HTML:

编辑：

---

链接到代码片段：

我认为您应该使用clipboard.js插件。

---

我在这里找到了所有人的答案

<script>

window.onload = function () {

    var copyTextareaBtn = document.querySelectorAll('.js-textareacopybtn');

    copyTextareaBtn.forEach(function(btn){
        btn.addEventListener('click', function (event) {
        var copyTextarea = document.getElementById(this.dataset.txtid);
        copyTextarea.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
                alert('Copying text command was ' + msg);
            } catch (err) {
                alert('Whoops, unable to copy');
            }
        })

    });
}

</script>

<p>Test #1 </p>

<div>
<textarea id="txta1" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hello. This is textarea test bed #1</textarea>
<button data-txtid="txta1" class="js-textareacopybtn">Copy Text (works)</button>

<p>Test #2:</p>

<textarea id="txta2" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hi! Welcome to textarea test bed #2 </textarea>
<button data-txtid="txta2" class="js-textareacopybtn">Copy Text</button>

</div>

window.onload=函数（）{
var copyTextareaBtn=document.querySelectorAll（'.js textareacopybtn'）；
copyTextareaBtn.forEach（功能（btn）{
btn.addEventListener（'click'，函数（事件）{
var copyTextarea=document.getElementById（this.dataset.txtid）；
copyTextarea.select（）；
试一试{
var successful=document.execCommand（'copy'）；
var msg=successful？'successful'：'successful'；
警报（'复制文本命令为'+msg'）；
}捕捉（错误）{
警报（“哎呀，无法复制”）；
}
})
});
}
测试#1

你好这是textarea测试台#1
复制文本（作品）
测试#2：

你好欢迎来到textarea测试台#2
复制文本

我认为当您将

href

添加到您的

希望能有所帮助。
我不确定我是否正确，但我认为在运行代码时，您的代码对我来说很好。你确定你没有其他打字错误吗？是的，这是我正在开发的网站，如果你向下滚动到“我们的服务器”部分，尝试复制服务器IP，你就会明白我的意思。FWI：我还没有做过任何分辨率小于1440p的最大css，所以如果你的屏幕分辨率小于1440pAs，它看起来会被破坏。我在你的例子中看到，当我点击一个按钮时，在另一个按钮中，它会复制两个值。请你看看这个插件，告诉我它是否工作正常。我不能点击上面的按钮，我忘了添加A标签设置了A href，所以它们是可点击的：实际上它们是可点击的，而且它们也完成了自己的工作，只是没有显示手！
function CopyToClipboard(containerid) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy");
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().addRange(range);
    document.execCommand("copy");
  }
}

<script>

window.onload = function () {

    var copyTextareaBtn = document.querySelectorAll('.js-textareacopybtn');

    copyTextareaBtn.forEach(function(btn){
        btn.addEventListener('click', function (event) {
        var copyTextarea = document.getElementById(this.dataset.txtid);
        copyTextarea.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
                alert('Copying text command was ' + msg);
            } catch (err) {
                alert('Whoops, unable to copy');
            }
        })

    });
}

</script>

<p>Test #1 </p>

<div>
<textarea id="txta1" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hello. This is textarea test bed #1</textarea>
<button data-txtid="txta1" class="js-textareacopybtn">Copy Text (works)</button>

<p>Test #2:</p>

<textarea id="txta2" class="js-copytextarea" readonly="readonly" style="width:20%;" 
rows="5">Hi! Welcome to textarea test bed #2 </textarea>
<button data-txtid="txta2" class="js-textareacopybtn">Copy Text</button>

</div>