优化从输入字段复制数据的javascript onclick函数

Question

我有一个javascript函数，可以将信息从文本输入字段复制到剪贴板，功能很好。但是，我需要此功能才能处理多个输入或将多个onclick事件连接到同一输入字段。

基本上，我正在寻找优化以下方法。

function h1Function() {
var copyText1 = document.getElementById("h1Input");
copyText1.select();
document.execCommand("copy");
alert("Copied the text: " + copyText1.value);
}
function h2Function() {
var copyText2 = document.getElementById("h2Input");
copyText2.select();
document.execCommand("copy");
alert("Copied the text: " + copyText2.value);
}

连接到以下html字段。

<h1><a href="#" onclick="h1Function()">abcdefg123456ABCDEFG - h1</a></h1>
<input type="text" value="<div class='h1 highlight'>Din tekst her</div>" 
id="h1Input" />
<h2><a href="#" onclick="h2Function()">abcdefg123456ABCDEFG - h2</a></h2>
<input type="text" value="<div class='h2 highlight'>Din tekst her</div>" 
id="h2Input" />

任何和所有优化技巧将不胜感激

Answer 1

只需将id作为参数传递给函数即可。

function h1Function(id) {
  var copyText1 = document.getElementById(id);
  copyText1.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText1.value);
}

<h1>
  <a href="#" onclick="h1Function('input1')">abcdefg123456ABCDEFG - h1</a>
</h1>
<input type="text" id="input1" value="<div class='h1 highlight'>Din tekst her</div>" 
id="h1Input" />
<h2>
  <a href="#" onclick="h1Function('input2')">abcdefg123456ABCDEFG - h2</a>
</h2>
<input type="text" id="input2" value="<div class='h2 highlight'>Din tekst her</div>" 
id="h2Input" />