如何实现点击code标签元素复制innerHTML并优化重复代码？

我希望实现点击页面中任意带有<code>标签的元素时，复制该元素的innerHTML。目前页面中有6-7个code标签元素，我尝试了一段重复冗余的代码实现（如下），想知道是否有办法选中所有code标签元素，无需为每个元素单独编写函数即可实现需求？

原实现代码：

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);
});

优化方案 #

可以通过批量选中所有code标签，绑定统一的点击事件处理函数来简化代码，避免重复逻辑：

// 获取页面中所有code标签
const codeElements = document.getElementsByTagName('CODE');

// 复制文本的通用函数
function copytext(text) {
    navigator.clipboard
        .writeText(text)
        .then(() => {
            // 可选：添加复制成功的提示，比如 console.log('内容已复制到剪贴板')
        })
        .catch(() => {
            alert("复制失败，请重试");
        });
}

// 遍历所有code元素，绑定点击事件
for (const code of codeElements) {
    code.addEventListener('click', function() {
        // 点击时复制当前元素的innerHTML
        copytext(this.innerHTML);
    });
}

补充说明 #

• 无需逐个定义code1、code2这类变量，通过getElementsByTagName直接获取所有code元素集合
• 用for...of循环遍历集合，给每个元素绑定同一个点击事件，代码更简洁
• 事件处理函数中用this指代当前被点击的code元素，直接获取其innerHTML，避免原代码中未定义的hello1等变量错误
• 也可以用document.querySelectorAll('code')替代getElementsByTagName，支持更灵活的CSS选择器语法，效果一致

内容的提问来源于stack exchange，提问作者Arq