如何组合多个复制到剪贴板功能？

Question

我正在尝试弄清楚如何将多个“复制到剪贴板”按钮复制到单个脚本中。

我的页面具有动态文本区域，当用户完成表单时会填写这些文本区域，并且每个文本区域都有自己的“复制到剪贴板”按钮：

HTML

<tr>
<td><textarea id="TemplateField1"></textarea></td>
<td><img src="copybutton.png" onClick="CopyTemplateField1();"></td>
</tr>

<tr>
<td><textarea id="TemplateField2"></textarea></td>
<td><img src="copybutton.png" onClick="CopyTemplateField2();"></td>
</tr>

<tr>
<td><textarea id="TemplateField3"></textarea></td>
<td><img src="copybutton.png" onClick="CopyTemplateField3();"></td>
</tr>

JavaScript

Function CopyTemplateField1() {
var copyText = document.getElementById("TemplateField1");

copyText.select();

navigator.clipboard.writeText(copyText.value);
}

Function CopyTemplateField2() {
var copyText = document.getElementById("TemplateField2");

copyText.select();

navigator.clipboard.writeText(copyText.value);
}

Function CopyTemplateField3() {
var copyText = document.getElementById("TemplateField3");

copyText.select();

navigator.clipboard.writeText(copyText.value);
}

我仍然希望每个复制按钮从关联的文本区域复制文本，但将三个独立的功能合并为一个功能，该功能将区分按下哪个按钮并将该文本复制到剪贴板。

我尝试使用 if/else 但一直出错。搜索了类似的文章，但找不到匹配的内容。如果有其他方法可以使用，但更喜欢使用 JavaScript，因为页面非常简单。

Answer 1

使用函数参数似乎是最好的选择

<tr>
  <td><textarea id="TemplateField1"></textarea></td>
  <td><img src="copybutton.png" onClick="CopyTemplateField(1);"></td>
</tr>

<tr>
  <td><textarea id="TemplateField2"></textarea></td>
  <td><img src="copybutton.png" onClick="CopyTemplateField(2);"></td>
</tr>

<tr>
  <td><textarea id="TemplateField3"></textarea></td>
  <td><img src="copybutton.png" onClick="CopyTemplateField(3);"></td>
</tr>

function CopyTemplateField(n) {
  var copyText = document.getElementById("TemplateField" + n);
  copyText.select();
  navigator.clipboard.writeText(copyText.value);
}