{"id":32903,"date":"2023-02-02T23:32:28","date_gmt":"2023-02-02T18:02:28","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/"},"modified":"2023-02-02T23:32:28","modified_gmt":"2023-02-02T18:02:28","slug":"solved-need-that-javascript-function-to-only-runs-once-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/","title":{"rendered":"[Solved] need that javascript function to only runs once [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You shouldn’t use inline JavaScript. Not only it makes your code less maintainable but it makes attaching and detaching events much harder.<\/p>\n

What you should do is to fetch the target element from the DOM and attach a click handler to it. To be able to detach it later, the click handler can’t be an anonymous function, so define it separately.<\/p>\n

Later on you can attach the listener that will be executed when you click the element. If you want to run it only once, you can use the click handler to detach the handler itself afterwards. See example (in the context of an event handler ‘this’ refers to the DOM element itself)<\/p>\n

var button = document.getElementById(\"clickme\");\nvar clickHandler = function(e) {\n    alert(\"clicked\");\n    this.removeEventListener(\"click\", clickHandler);\n}\nbutton.addEventListener(\"click\", clickHandler);\n<\/code><\/pre>\n
Here’s a working example
\nhttp:\/\/codepen.io\/anon\/pen\/xAjnG\/?editors=101<\/a><\/p>\n
To extend it further, if you want the button to be active not once but a number of times, you can keep a counter. Note you can use this general case and set limit = 1.<\/p>\n
var button = document.getElementById(\"clickme\");\nvar counter = 0;\nvar limit = 3;\nvar clickHandler = function(e) {\nalert(\"clicked \" + ++counter);\n\n    if(counter >= limit) {\n        this.removeEventListener(\"click\", clickHandler);\n    }\n}\n\nbutton.addEventListener(\"click\", clickHandler);\n<\/code><\/pre>\n
Here’s a working example
\nhttp:\/\/codepen.io\/anon\/pen\/mzjcC\/?editors=101<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved need that javascript function to only runs once [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You shouldn’t use inline JavaScript. Not only it makes your code less maintainable but it makes attaching and detaching events much harder. What you should do is to fetch the target element from the DOM and attach a click handler to it. To be able to detach it later, the click handler can’t be … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333],"class_list":["post-32903","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript"],"yoast_head":"\n[Solved] need that javascript function to only runs once [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] need that javascript function to only runs once [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You shouldn’t use inline JavaScript. Not only it makes your code less maintainable but it makes attaching and detaching events much harder. What you should do is to fetch the target element from the DOM and attach a click handler to it. To be able to detach it later, the click handler can’t be ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-02T18:02:28+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] need that javascript function to only runs once [closed]\",\"datePublished\":\"2023-02-02T18:02:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/\"},\"wordCount\":195,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/\",\"name\":\"[Solved] need that javascript function to only runs once [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2023-02-02T18:02:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-need-that-javascript-function-to-only-runs-once-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] need that javascript function to only runs once [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] need that javascript function to only runs once [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] need that javascript function to only runs once [closed] - JassWeb","og_description":"[ad_1] You shouldn’t use inline JavaScript. Not only it makes your code less maintainable but it makes attaching and detaching events much harder. What you should do is to fetch the target element from the DOM and attach a click handler to it. To be able to detach it later, the click handler can’t be ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/","og_site_name":"JassWeb","article_published_time":"2023-02-02T18:02:28+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] need that javascript function to only runs once [closed]","datePublished":"2023-02-02T18:02:28+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/"},"wordCount":195,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/","name":"[Solved] need that javascript function to only runs once [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-02-02T18:02:28+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-need-that-javascript-function-to-only-runs-once-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] need that javascript function to only runs once [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/32903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=32903"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/32903\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=32903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=32903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=32903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}