html 如何从不同的按钮复制文本到剪贴板?

2w2cym1i  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(216)

我试图创建一个网页元素,当按下一个按钮时,将促销代码复制到剪贴板。我已经成功地为一个按钮完成了这个操作,但当添加其他按钮时,它只会复制第一个按钮的代码。我认为这是因为它们共享一个ID。
以下是我的按钮在HTML中的外观:(所有这些都在“contentPromo”p标签中有不同的代码,该文本是我试图复制到剪贴板的内容)

<!-- Button 1 -->
<div class="accordionPromo">
    <button id="copy">Get A Code</button>
</div>

<div class="panel">
<p id="contentPromo">Reds15</p>
</div>



<!-- Button 2 -->
<div class="accordionPromo">
    <button id="copy">Get A Code</button>
</div>

<div class="panel">
<p id="contentPromo">Cub50</p>
</div>

(我有2个这样的按钮)
我希望每个按钮可以被点击它的促销代码将复制到剪贴板。到现在为止,如果我点击第一个按钮,它将复制Reds15。当我点击第二个按钮,它不复制任何东西,我的剪贴板是不变的。这里是我的JavaScript,控制复制到剪贴板:

// Reference of the paragraph tag
const contentPromo = document.getElementById("contentPromo");

// Reference of the copy button
const copyBtn = document.getElementById("copy");

// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;

// Method responsible for copying the contentPromo
function copyToClipboard() {
    navigator.clipboard
       .writeText(contentPromo.innerText)
       .then(() => alert("Copied to clipboard"))
       .catch((e) => alert(e.message));
}

我如何让这个工作的4个独立的按钮?

nbysray5

nbysray51#

一个重要的问题是你有多个项目具有相同的ID,这在HTML中不是一件好事。它们应该都是唯一的,所以代码会找到第一个项目并给你数据。
如果你不需要一个可视的(面板类divs),给每个按钮一个唯一的ID,这就是你想要使用的代码。
举个简单的例子...

<style>
    .accordionPromo {
        margin: 0 0 15px 0;
    }   
</style>

<!-- Button 1 -->
<div class="accordionPromo">
    <button id="Reds15">Get A Code</button>
</div>

<!-- Button 2 -->
<div class="accordionPromo">
    <button id="Cub50">Get A Code</button>
</div>

<script>
    var clickedButton;
    //vanilla Javascript
    document.querySelectorAll('button').forEach(function(obj) {
      obj.addEventListener('click', function() {
        copyToClipboard(this.id);
      });
    });

    //jQuery option
    /*
    $('button').each(function() {
        $(this).on('click', function() {
        copyToClipboard(this.id);
        });
    });
    */

    function copyToClipboard(txt) {
        console.log(txt);
        navigator.clipboard
            .writeText(txt)
            .then(() => console.log('Copied to clipboard'))
            .catch((e) => console.log(e.message));
    }
</script>

querySelectorAll将获取页面上所有包含class、type等的元素。在本例中,"button"将在单击时添加一个侦听器。您仍然可以使用面板div作为可视化和样式,但繁重的工作是按钮本身和事件侦听器。添加jQuery选项时,只需删除不需要的选项即可。

  • 编辑:已更改-添加了与OP问题更匹配的剪贴板副本

相关问题