{"id":4389,"date":"2026-02-16T16:50:51","date_gmt":"2026-02-16T16:50:51","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=4389"},"modified":"2026-02-16T16:55:51","modified_gmt":"2026-02-16T16:55:51","slug":"calling-javascript-from-a-link","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/links-javascript\/calling-javascript-from-a-link","title":{"rendered":"Calling JavaScript from a link"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Using a click listener when a button has have a settable ID<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Your button ID<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>MyButtonId<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Your handler<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;script>\n    document.addEventListener(\"DOMContentLoaded\", function(event) {\n      document.getElementById('MyButtonId').addEventListener('click', function()\n      {\n        \/\/Do something...\n\n      });\n    });\n  &lt;\/script><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Using a click listener when a button doesn&#8217;t have a settable ID<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Your buttons link (its href=)<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>#MyButtonLink<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Your handler<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;script>\n    document.addEventListener(\"DOMContentLoaded\", function()\n    {\n      document.addEventListener('click', function(Event)\n      {\n        const Button = Event.target.closest('a&#91;href=\"#MyButtonLink\"]');\n        if (!Button)\n          return;\n        Event.preventDefault();\n\n        \/\/Do something...\n\n      });\n    });\n  &lt;\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Using a click listener when a button has have a settable ID Your button ID Your handler Using a click listener when a button doesn&#8217;t have a settable ID Your buttons link (its href=) Your handler<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[],"class_list":["post-4389","post","type-post","status-publish","format-standard","hentry","category-links-javascript"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=4389"}],"version-history":[{"count":2,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4389\/revisions"}],"predecessor-version":[{"id":4392,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/4389\/revisions\/4392"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=4389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=4389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=4389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}