How to combine two classes for one button

Question

I have a button that does copy function for me with the help of JS:

<button class="js-copy-btn" data-clipboard-target=".cb-target-1">E</button>
<p class="cb-target-1">SOME TEXT</p>
var clipboard = new ClipboardJS('.js-copy-btn');

And i want to include the function that counts how many times do i press that button with this:

 <button class="btn">Button</button>
<span class="cnt">0</span>
document.querySelectorAll('ul .btn')
.forEach(function(el){ 
 el.onclick = function() {
  let cnt = this.closest('li').querySelector('.cnt');
  cnt.innerText = parseInt(cnt.innerText, 10)+1;
 };
 });

Please help me realize if it is possible to have two classes for one button, taking that there will be a lot of buttons and each button should have the count option, so far I was not able to find any solution. Sorry if the question is stupid. PS. Not interested in collecting data of the buttons in the long run, that is why the count option is in html and not in the separate file. Thank you in advance.

You can assign multiple classes see https://stackoverflow.com/questions/8722163/how-to-assign-multiple-classes-to-an-html-container — trashrobber, Oct 30 '20 at 11:46

score 0 · Answer 1 · answered Oct 29 '20 at 19:44

It is possible to have two classes for one button, you can just give the button more than one class.

<button class="btn cnt">Button</button>

P.S. Including javascript in a seperate file has nothing to do with "keeping data for the long run." It is just the proper way to manage javascript.

How to combine two classes for one button

1 Answers1