Run Javascript on Button/Link Click

Question

I need to load a tag when a particular button is pressed. Unfortunately, the site editor is limited, and there aren't any clearly defined IDs for any of these buttons, so I wrote the code below identify each item by its classes to help. However, I don't see any trace of the buttons firing the script in Chrome's web developer tools when I click. Any idea what I'm missing or doing wrong?

<!--- Contact Us Button -->
<a data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" data-aid="HEADER_CTA_BTN" href="tel:+1(899) 444-5555" target="" data-tccl="ux2.header.cta_button.click,click" data-typography="ButtonAlpha" class="x-el x-el-a c1-27 c1-2 c1-67 c1-68 c1-69 c1-1y c1-6a c1-6b c1-11 c1-1e c1-1d c1-1v c1-1f c1-1w c1-q c1-1k c1-4 c1-6c c1-6d c1-6e c1-6f c1-6g c1-6h c1-v c1-2b c1-6i c1-6j c1-6k c1-6l c1-6m c1-1j c1-2d c1-6n c1-1l c1-6o c1-6p c1-6q c1-6r c1-6s c1-1p c1-1q c1-1r c1-1s">Contact us</a>

<!-- Sign Up Button -->
<button data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" type="submit" data-tccl="ux2.gem-subscribe.submit_form.click,click" data-aid="SUBSCRIBE_SUBMIT_BUTTON_REND" data-typography="ButtonAlpha" class="x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-2u c2-3v c2-3w c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-4f c2-4g c2-2s c2-2t c2-4h c2-4i c2-14 c2-15 c2-16 c2-17">Sign up</button>

<!-- Send Button -->
<button data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" type="submit" data-aid="CONTACT_SUBMIT_BUTTON_REND" data-tccl="ux2.contact.submit_form.click,click" state="default" data-typography="ButtonAlpha" class="x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-2u c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-1k c2-14 c2-15 c2-16 c2-17">Send</button>

<script>

//Contact Us Button

document.getElementsByClassName("x-el x-el-a c1-27 c1-2 c1-67 c1-68 c1-69 c1-1y c1-6a c1-6b c1-11 c1-1e c1-1d c1-1v c1-1f c1-1w c1-q c1-1k c1-4 c1-6c c1-6d c1-6e c1-6f c1-6g c1-6h c1-v c1-2b c1-6i c1-6j c1-6k c1-6l c1-6m c1-1j c1-2d c1-6n c1-1l c1-6o c1-6p c1-6q c1-6r c1-6s c1-1p c1-1q c1-1r c1-1s").onclick = function() {ContactUsFunction()};

function ContactUsFunction() {
  var jsContactUsElm = document.createElement("script");
  jsContactUsElm.type = "application/javascript";
  jsContactUsElm.src = "https://tag.website.com/webtag/7afa3940-b9ea-013a-4b1b-0cc47a1f72a";
  document.body.appendChild(jsContactUsElm);
}

//Sign Up Button

document.getElementsByClassName("x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-2u c2-3v c2-3w c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-4f c2-4g c2-2s c2-2t c2-4h c2-4i c2-14 c2-15 c2-16 c2-17").onclick = function() {SignUpFunction()};

function SignUpFunction() {
  var jsSignUpElm = document.createElement("script");
  jsSignUpElm.type = "application/javascript";
  jsSignUpElm.src = "https://tag.website.com/webtag/83815dc0-b9ea-013a-50d0-0cc47a8ffaac";
  document.body.appendChild(jsSignUpElm);
}

//Send Button

document.getElementsByClassName("x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-2u c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-1k c2-14 c2-15 c2-16 c2-17").onclick = function() {SendFunction()};

function SendFunction() {
  var jsSendElm = document.createElement("script");
  jsSendElm.type = "application/javascript";
  jsSendElm.src = "https://tag.website.com/webtag/8ead65a0-b9ea-013a-4b1b-0cc47a1f72a4";
  document.body.appendChild(jsSendElm);
}
</script>

You could use window.eval() but be aware of the security risks! — Adnane Ar
– Adnane Ar, Commented May 23, 2022 at 18:12
document.getElementsByClassName() returns a live htmlCollection, so you need to iterate through that to assign an event listener. Additionally, I believe it only matches a single class, so I'd probably try document.querySelectorAll() instead, and again, iterating over that to assign an event listener. — mykaf
– mykaf, Commented May 23, 2022 at 18:20

adamalbu · Accepted Answer · 2022-05-23 18:23:28Z

1

In the HTML you can add the onclick function: onclick="function()"

answered May 23, 2022 at 18:23

adamalbu

113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adnane Ar · Accepted Answer · 2022-05-23 18:37:40Z

This is a simple solution for your problem, but keep in mind.. this is not an efficient way to do it! It's just a hack for your case and that is it. Note: I do not recommand using eval(), but if it does not affect the security of your code, it should be fine.

HTMLElement.prototype.appendImportedScript = function(url) {
  var script = document.createElement("script");
  script.type = "application/javascript";
  
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if( xhr.readyState !== 4 ) return;
    if( xhr.status == 200 ) {
      const { responseText } = xhr
      script.textContent = responseText;
      this.appendChild(script);
      window.eval(responseText);
    }
    else throw new Error("script url is unavailable.")
  }
  xhr.open('GET', url, true);
  xhr.send();
}

<!--- Contact Us Button -->
<a data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" data-aid="HEADER_CTA_BTN" href="tel:+1(899) 444-5555" target="" data-tccl="ux2.header.cta_button.click,click" data-typography="ButtonAlpha" class="x-el x-el-a c1-27 c1-2 c1-67 c1-68 c1-69 c1-1y c1-6a c1-6b c1-11 c1-1e c1-1d c1-1v c1-1f c1-1w c1-q c1-1k c1-4 c1-6c c1-6d c1-6e c1-6f c1-6g c1-6h c1-v c1-2b c1-6i c1-6j c1-6k c1-6l c1-6m c1-1j c1-2d c1-6n c1-1l c1-6o c1-6p c1-6q c1-6r c1-6s c1-1p c1-1q c1-1r c1-1s" onclick="ContactUsFunction()">Contact us</a>

<!-- Sign Up Button -->
<button data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" type="submit" data-tccl="ux2.gem-subscribe.submit_form.click,click" data-aid="SUBSCRIBE_SUBMIT_BUTTON_REND" data-typography="ButtonAlpha" class="x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-2u c2-3v c2-3w c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-4f c2-4g c2-2s c2-2t c2-4h c2-4i c2-14 c2-15 c2-16 c2-17" onclick="SignUpFunction()">Sign up</button>

<!-- Send Button -->
<button data-ux-btn="primary" customborderwidth="small" data-ux="ButtonPrimary" type="submit" data-aid="CONTACT_SUBMIT_BUTTON_REND" data-tccl="ux2.contact.submit_form.click,click" state="default" data-typography="ButtonAlpha" class="x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-2u c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-1k c2-14 c2-15 c2-16 c2-17" onclick="SendFunction()">Send</button>

<script>

//Contact Us Button

document.getElementsByClassName("x-el x-el-a c1-27 c1-2 c1-67 c1-68 c1-69 c1-1y c1-6a c1-6b c1-11 c1-1e c1-1d c1-1v c1-1f c1-1w c1-q c1-1k c1-4 c1-6c c1-6d c1-6e c1-6f c1-6g c1-6h c1-v c1-2b c1-6i c1-6j c1-6k c1-6l c1-6m c1-1j c1-2d c1-6n c1-1l c1-6o c1-6p c1-6q c1-6r c1-6s c1-1p c1-1q c1-1r c1-1s").onclick = function() {ContactUsFunction()};

function ContactUsFunction() {
  const url = "https://tag.website.com/webtag/7afa3940-b9ea-013a-4b1b-0cc47a1f72a";
  document.body.appendImportedScript(url)
}

//Sign Up Button

document.getElementsByClassName("x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-2u c2-3v c2-3w c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-4f c2-4g c2-2s c2-2t c2-4h c2-4i c2-14 c2-15 c2-16 c2-17").onclick = function() {SignUpFunction()};

function SignUpFunction() {
  const url = "https://tag.website.com/webtag/83815dc0-b9ea-013a-50d0-0cc47a8ffaac";
  document.body.appendImportedScript(url)
}

//Send Button

document.getElementsByClassName("x-el x-el-button c2-g c2-2 c2-3s c2-3t c2-3u c2-l c2-3x c2-3y c2-m c2-3z c2-2k c2-h c2-j c2-i c2-n c2-1h c2-2u c2-40 c2-41 c2-42 c2-34 c2-43 c2-44 c2-2x c2-2p c2-45 c2-46 c2-47 c2-48 c2-49 c2-o c2-r c2-4a c2-q c2-4b c2-4c c2-4d c2-4e c2-1k c2-14 c2-15 c2-16 c2-17").onclick = function() {SendFunction()};

function SendFunction() {
  const url = "https://tag.website.com/webtag/8ead65a0-b9ea-013a-4b1b-0cc47a1f72a4";
  document.body.appendImportedScript(url)
}
</script>

HASEEB ALAM RAFIQ · Accepted Answer · 2022-05-23 18:20:15Z

0

best way to do that,

let buttons = document.getElementsByClassName("x-el-button);

buttons.forEach((button) => {
button.addEventListener(function() {
//put your button click events here
})
})

answered May 23, 2022 at 18:20

HASEEB ALAM RAFIQ

511 silver badge9 bronze badges

Collectives™ on Stack Overflow

Run Javascript on Button/Link Click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related