Quiero hacer que cuando se haga clic en cualquier elemento con la etiqueta de código, el usuario copie el HTML interno del elemento. Pero la cosa es que tengo 6-7 elementos con la etiqueta de código, he intentado esto:
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); });Pero siento que es demasiado repetitivo. ¿Hay alguna manera de seleccionar cada elemento con una etiqueta de código y copiar su HTML interno sin tener que escribir una función para cada uno?
Accedes a this elemento
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>El document.getElementsByTagName() para devolver una matriz para que pueda hacer
let codes = document.getElementsByTagName(); codes.foreach((element)=>{ element.addEventListener('click', () => {copytext(element)}) });