{"id":27165,"date":"2022-12-22T19:20:33","date_gmt":"2022-12-22T13:50:33","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/"},"modified":"2022-12-22T19:20:33","modified_gmt":"2022-12-22T13:50:33","slug":"solved-on-click-function-js-make-dynamic","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/","title":{"rendered":"[Solved] On click function JS make dynamic"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-48864427\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"48864427\" data-parentid=\"48864022\" data-score=\"-1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<h2>Review<\/h2>\n<p>Firstly, I&#8217;m assuming you&#8217;re new to JavaScript, if you&#8217;re not, then I don&#8217;t know what to say, but let&#8217;s just say you are. Firstly, that&#8217;s a horrible way to do things. Not only could other scripts assign events to the window click event, which may cause serious bugs with your code, but exposing things to the global scope is quite bad. <\/p>\n<p>I suggest you look at encapsulating things into objects, like I&#8217;ve done in my example below, and you then look at the JavaScript module design pattern, trust me, it&#8217;ll pay off.<\/p>\n<hr>\n<h2>My Solution<\/h2>\n<p>As you can see in the code below, I&#8217;ve assigned events to individual dom elements, this makes event handlers much easier to maintain firstly, I also find that it makes the code a lot neater. <\/p>\n<p>Sure, the initial code for the object I&#8217;ve defined <code>EventHandlerObject<\/code>, it looks bulky at a glance, but thanks to using the key word <code>prototype<\/code>, you can add to and extend the object as much as you like, you can even make an object so that it can add certain functions\/features dynamically. <\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>function EventHandlerObject() {\r\n  \/\/ basic singleton implementation \r\n  if (EventHandlerObject.instance !== null \r\n  \t&amp;&amp; typeof EventHandlerObject.instance !== \"undefined\") {\r\n  \treturn this.instance;\r\n  } else { EventHandlerObject.instance = this; }\r\n}\r\n\r\n\r\nEventHandlerObject.prototype.action = function (obj, eventType, callback) {\r\n  if (typeof obj === \"undefined\" || obj === null) { return; }\r\n  if (obj.length || obj instanceof Array) {\r\n    for (var i = 0, s = obj.length; i &lt; s; i++) {\r\n      var elm = obj[i];\r\n      try { \/\/ try to remove the event\r\n        if (elm.removeEventListener) { elm.removeEventListener(eventType, callback, false); }\r\n        else { elm[eventType + callback] = null; }\r\n      } catch (e) { console.log(e); }\r\n\r\n      try { \/\/ try to add the event and callback\r\n        if (elm.addEventListener) { elm.addEventListener(eventType, callback, false); }\r\n        else if (elm.attachEvent) { elm.attachEvent('on' + eventType, callback); }\r\n        else { elm[\"on\"+eventType] = callback; }\r\n      } catch (e) { console.log(e); }\r\n    }\r\n  } else {\r\n    try { \/\/ try to remove the event\r\n      if (obj.removeEventListener) { obj.removeEventListener(eventType, callback, false); }\r\n      else { obj[eventType + callback] = null; }\r\n    } catch (e) { console.log(e); }\r\n\r\n    try { \/\/ try to add the event and callback\r\n      if (obj.addEventListener) { obj.addEventListener(eventType, callback, false); }\r\n      else if (obj.attachEvent) { obj.attachEvent('on' + eventType, callback); }\r\n      else { obj[\"on\"+eventType] = callback; }\r\n    } catch (e) { console.log(e); }\r\n  }\r\n};\r\n\r\n\r\nvar elms = document.querySelectorAll(\".dropbtn, .fa-briefcase\");\r\nvar events = new EventHandlerObject();\r\nevents.action(elms, \"click\", function(){\r\n  var dropdowns = document.getElementsByClassName(\"dropdown-content\");\r\n  var i;\r\n  for (i = 0; i &lt; dropdowns.length; i++) {\r\n    var openDropdown = dropdowns[i];\r\n    if (openDropdown.classList.contains('show')) {\r\n      openDropdown.classList.remove('show');\r\n    }\r\n  }\r\n});\r\n\r\n\r\nvar otherElms = document.querySelectorAll(\".dropbtn7, .fa-motorcycle\");\r\nevents.action(otherElms, \"click\", function(){\r\n  var dropdowns = document.getElementsByClassName(\"dropdown-content7\");\r\n  var i;\r\n  for (i = 0; i &lt; dropdowns.length; i++) {\r\n    var openDropdown = dropdowns[i];\r\n    if (openDropdown.classList.contains('show7')) {\r\n      openDropdown.classList.remove('show7');\r\n    }\r\n  }\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<hr>\n<h2>Additionals<\/h2>\n<p>I suggest you do a lot of learning, a good place I find to learn JavaScript from scratch would be <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/\">MDN<\/a>. When I was trying to learn <strong>everything<\/strong> from scratch from design patterns to using API&#8217;s, etc, I personally think it&#8217;s an exceptional source for learning, not only does it teach you how to do certain things, but it also tells you what browser supports what functionality which is a <strong>beautiful<\/strong> feature, especially when you want to find out asap rather than testing\/doing additional research. <\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved On click function JS make dynamic <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Review Firstly, I&#8217;m assuming you&#8217;re new to JavaScript, if you&#8217;re not, then I don&#8217;t know what to say, but let&#8217;s just say you are. Firstly, that&#8217;s a horrible way to do things. Not only could other scripts assign events to the window click event, which may cause serious bugs with your code, but exposing &#8230; <a title=\"[Solved] On click function JS make dynamic\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\" aria-label=\"More on [Solved] On click function JS make dynamic\">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":[1099,333,1017],"class_list":["post-27165","post","type-post","status-publish","format-standard","hentry","category-solved","tag-drop-down-menu","tag-javascript","tag-onclick"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] On click function JS make dynamic - 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-on-click-function-js-make-dynamic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] On click function JS make dynamic - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Review Firstly, I&#8217;m assuming you&#8217;re new to JavaScript, if you&#8217;re not, then I don&#8217;t know what to say, but let&#8217;s just say you are. Firstly, that&#8217;s a horrible way to do things. Not only could other scripts assign events to the window click event, which may cause serious bugs with your code, but exposing ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-22T13:50:33+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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] On click function JS make dynamic\",\"datePublished\":\"2022-12-22T13:50:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\"},\"wordCount\":295,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"drop-down-menu\",\"javascript\",\"onclick\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\",\"name\":\"[Solved] On click function JS make dynamic - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-22T13:50:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] On click function JS make dynamic\"}]},{\"@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\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] On click function JS make dynamic - 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-on-click-function-js-make-dynamic\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] On click function JS make dynamic - JassWeb","og_description":"[ad_1] Review Firstly, I&#8217;m assuming you&#8217;re new to JavaScript, if you&#8217;re not, then I don&#8217;t know what to say, but let&#8217;s just say you are. Firstly, that&#8217;s a horrible way to do things. Not only could other scripts assign events to the window click event, which may cause serious bugs with your code, but exposing ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/","og_site_name":"JassWeb","article_published_time":"2022-12-22T13:50:33+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] On click function JS make dynamic","datePublished":"2022-12-22T13:50:33+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/"},"wordCount":295,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["drop-down-menu","javascript","onclick"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/","url":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/","name":"[Solved] On click function JS make dynamic - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-22T13:50:33+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-on-click-function-js-make-dynamic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] On click function JS make dynamic"}]},{"@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\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","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\/27165","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=27165"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/27165\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=27165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=27165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=27165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}