我如何做到这一点，以便当您单击代码标记的元素时，复制其 innerHTML

Question

我想这样当任何带有代码标签的元素被点击时，用户复制元素的innerHTML。 但问题是我有 6-7 个带有代码标签的元素，我试过这个：

 const code1 = document.getElementsByTagName('CODE')[0]; const code2 = document.getElementsByTagName('CODE')[1]; const code3 = document.getElementsByTagName('CODE')[2]; const code4 = document.getElementsByTagName('CODE')[3]; const code5 = document.getElementsByTagName('CODE')[4]; const code6 = document.getElementsByTagName('CODE')[6]; const code7 = document.getElementsByTagName('CODE')[7]; function copytext(text) { navigator.clipboard .writeText(text) .then(() => { }) .catch(() => { alert("something went wrong"); }); } code1.addEventListener('click', function handleClick() { copytext(hello1); }); code2.addEventListener('click', function handleClick() { copytext(hello2); }); code3.addEventListener('click', function handleClick() { copytext(hello3); }); code4.addEventListener('click', function handleClick() { copytext(hello3); }); code5.addEventListener('click', function handleClick() { copytext(hello4); }); code6.addEventListener('click', function handleClick() { copytext(hello5); }); code7.addEventListener('click', function handleClick() { copytext(hello6); });

但我觉得它太重复了。 有没有办法选择每个带有代码标签的元素，并复制它的 innerHTML 而不必为每个元素编写函数？

Answer 1

您访问this元素

 for(let element of document.getElementsByTagName('CODE')){ element.addEventListener('click',GetInnerHTML); } function GetInnerHTML(){console.log(this.innerHTML);}

 CODE{display:block}

 <CODE>A</CODE> <CODE>B</CODE>

Answer 2

document.getElementsByTagName() 返回一个数组，所以你可以这样做

let codes = document.getElementsByTagName();
codes.foreach((element)=>{
element.addEventListener('click', () => {copytext(element)})
});