Calling a function on button click

Question

I have a function on the index.html file of my project, i want this function to work only on the button click. The button click is on the other component. How can i achieve this ?

      function clarity(){
        debugger
        const regArray = ['http://localhost:4200/registration/credentials'];
        const currentRoute = window.location.href;
        const isRegArray = regArray.indexOf(currentRoute);
        if (isRegArray > -1) {
          document.querySelector('.yes-button')?.addEventListener('click', () => {
            console.log('cancel');
            clarity('set', 'Registration Details', 'CancelEvents')
          });
        }
      }

this is the function this clarity is from Microsoft clarity.