如何使用复制按钮复制文本中的变量?

Question

我对编码相当陌生，所以如果我的描述有点模糊，请原谅我。

我在JavaScript中创建了一个"复制"按钮：

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");
alert("text copied, copy in the text-area")
}
}

<span id="myInput">
<p>
Rope color: <strong><span id="colorName"></span></strong><br>
Type of clamp <strong><span id="clampName"></span></strong><br>
Rope length: 130cm <strong><span id="ropeLength"></span></strong>
</p>
</span>
<button id="button1" onclick="CopyToClipboard('myInput')">Copy</button>

现在按钮工作正常，但此函数仅复制div中的文本，而不是变量。
变量是：

• colorName(如红色、蓝色等(

• clampName(如强者、专家等(

• ropeLength(始终以"+"开头，然后以"XXXcm"开头(

如何确保所有内容(文本和变量(都被复制？

编辑：似乎问题不同...当唯一单击直接在按钮上时，复制有效。当您单击除按钮之外的任意位置时，然后单击按钮。该按钮不再起作用/复制。我认为这就是问题所在，因为变量是通过单击表单(例如选择红色作为颜色(来填充的。有什么帮助吗？

Answer 1

下面这个基于您的解决方案的小提琴似乎工作正常。我所做的唯一更改是将单击事件移动到事件侦听器。

document.getElementById("button1").addEventListener("click", CopyToClipboard);
function CopyToClipboard() {
var containerid = "myInput";
...
}

https://jsfiddle.net/q6kz4weu/