topic Re: OnClick function not working on all buttons in CMS Development

OnClick function not working on all buttons

Mrafey — Thu, 31 Aug 2023 20:53:43 GMT

I have developed action cards that have a "copy text" button on them, that when clicked copy the text that is in the component.

Here is my HubL + HTML code:

Following is my JS Code:

Whats odd is when I run this code, only one of the buttons "Copy text" works. So for instance if I have three action cards on my page, only the first action card's "Copy Text" button works and the other two dont.

Anyone have any idea what it could be?

Thanks!

Re: OnClick function not working on all buttons

Jaycee_Lewis — Fri, 01 Sep 2023 07:47:19 GMT

Hi, @Mrafey 👋 Thanks for your question. Can you add your code to your post, please? You can use the code block tool to help with formatting. Troubleshooting code from screenshots is hard to impossible for our community members to help with.

Thanks! — Jaycee

Re: OnClick function not working on all buttons

skimura — Fri, 01 Sep 2023 07:57:48 GMT

@Mrafey

Hi.

The method "getElementById" returns one element

even if there are multiple elements with the same ID.

How about use `class` ?

exmaple: (not tested)

// Add click event all [copyBtn] const copyBtns = Array.from(document.querySelectorAll('.copyBtn')); copyBtns.forEach((copyBtn, index) => { copyBtn.addEventListener('click', () => { // Get the text corresponding to the copy button const actionDescription = document.querySelectorAll('.copy-desc-text')[index]; const copyTxt = actionDescription.textContent; navigator.clipboard.writeText(copyTxt); ... }); });

Thanks.