如何在一行代码中跟踪元素 id 而不是具有多个脚本

Question

I am trying to track multiple buttons on a page, and I manage to do it with this current code by copy-pasting it multiple times, but I would like to shorten it. However, I can't figure out how I can do this.

<script type="text/javascript">
  var button = document.getElementById('lp-pom-button-201');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'click to call', {
        tracking_number: 'Phone Number',
      });          
    },
    false
  );
</script>

Answer 1

You can use callback instead of recreating the function each time You can achieve it this way:

 <script type="text/javascript"> var button = document.getElementById('lp-pom-button-201'); function myCallback() { fbq('track', 'click to call', { tracking_number: 'Phone Number', }); } button.addEventListener('click', myCallback, false); </script>

By this way you have only to bind the Event to aa button and centralized the management of it inside a single function.

More on callback: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

Answer 2

Patrissol Kenfack answer certainly would be better than repeating the same function over and over.

To expand on his answer, you might consider using document.querySelectorAll and custom data attributes

Example:

 function myCallback() { console.log(this.dataset.tracking) } document.querySelectorAll('[bind-onclick]').forEach((el) => { el.addEventListener('click', myCallback, false); })

 <div bind-onclick data-tracking="1">Click One</div> <div bind-onclick data-tracking="2">Click Two</div> <div bind-onclick data-tracking="3">Click Three</div>

All that said, you're appear to be using buttons (like you should; unlike I did above). Probably, should just use the onclick attribute instead of event listeners.

 function buttonClicked(el) { console.log(el.dataset.tracking) }

 <button onclick="buttonClicked(this)" data-tracking="1">Click One</button> <button onclick="buttonClicked(this)" data-tracking="2">Click Two</button> <button onclick="buttonClicked(this)" data-tracking="3">Click Three</button>