[Solved] On click function JS make dynamic

Question

Review

Firstly, I’m assuming you’re new to JavaScript, if you’re not, then I don’t know what to say, but let’s just say you are. Firstly, that’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.

I suggest you look at encapsulating things into objects, like I’ve done in my example below, and you then look at the JavaScript module design pattern, trust me, it’ll pay off.

My Solution

As you can see in the code below, I’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.

Sure, the initial code for the object I’ve defined EventHandlerObject, it looks bulky at a glance, but thanks to using the key word prototype, 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.

function EventHandlerObject() {
  // basic singleton implementation 
  if (EventHandlerObject.instance !== null 
  	&& typeof EventHandlerObject.instance !== "undefined") {
  	return this.instance;
  } else { EventHandlerObject.instance = this; }
}


EventHandlerObject.prototype.action = function (obj, eventType, callback) {
  if (typeof obj === "undefined" || obj === null) { return; }
  if (obj.length || obj instanceof Array) {
    for (var i = 0, s = obj.length; i < s; i++) {
      var elm = obj[i];
      try { // try to remove the event
        if (elm.removeEventListener) { elm.removeEventListener(eventType, callback, false); }
        else { elm[eventType + callback] = null; }
      } catch (e) { console.log(e); }

      try { // try to add the event and callback
        if (elm.addEventListener) { elm.addEventListener(eventType, callback, false); }
        else if (elm.attachEvent) { elm.attachEvent('on' + eventType, callback); }
        else { elm["on"+eventType] = callback; }
      } catch (e) { console.log(e); }
    }
  } else {
    try { // try to remove the event
      if (obj.removeEventListener) { obj.removeEventListener(eventType, callback, false); }
      else { obj[eventType + callback] = null; }
    } catch (e) { console.log(e); }

    try { // try to add the event and callback
      if (obj.addEventListener) { obj.addEventListener(eventType, callback, false); }
      else if (obj.attachEvent) { obj.attachEvent('on' + eventType, callback); }
      else { obj["on"+eventType] = callback; }
    } catch (e) { console.log(e); }
  }
};


var elms = document.querySelectorAll(".dropbtn, .fa-briefcase");
var events = new EventHandlerObject();
events.action(elms, "click", function(){
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
});


var otherElms = document.querySelectorAll(".dropbtn7, .fa-motorcycle");
events.action(otherElms, "click", function(){
  var dropdowns = document.getElementsByClassName("dropdown-content7");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show7')) {
      openDropdown.classList.remove('show7');
    }
  }
});

Additionals

I suggest you do a lot of learning, a good place I find to learn JavaScript from scratch would be MDN. When I was trying to learn everything from scratch from design patterns to using API’s, etc, I personally think it’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 beautiful feature, especially when you want to find out asap rather than testing/doing additional research.

Accepted Answer