javascript - Functions in Namespace Not Attaching Event Listeners to HTML Elements -

I have a local page to help with HTML and Javascript which helps me in some basic tasks at work. I am going back to my code and writing it again to use the best practices, because it helps me learn, and lately I am trying to study the namespace and it is normal Page functions and event listeners have been rewritten by typing.

  window.onload = (function () {var automationPageWrapper = (function () {var self = {} self.evntListeners = {btnTextChange: function () {// code while clicking Button changes text}, BtnColorChange: function (formID) {// code repeats through a button with a certain name and makes them all the same default color}} self.listeners = {btnListeners: function () {// to do all the events with the button to add listeners}}} return to self;}); Automation page vapor.listers.btn listener ();});  

1. Why is not this incident enclosing the audience?
2. Is there a better way to format / call?
3. Is this a professional way to set up javascript code?

I tested the event listeners by taking the function and posting them in Chrome console, so I think they work.

Full text, because some people like to read it:

  // global name space for the Page Functions window. AddEventListener ("onload", function) {var automationPageWrapper = (function ()} {var self = {}} // namespace for listener self.evtListeners = {// function to change the color of a selected button btnColorChange: function (FormName) {var elementsByName = document.getElementsByName (formName); (Var i = 0; i & lt; elementsByName.length; i ++) {if (elementsByName [i] .className == "active") {Eleme NtsByName [I] .className = "idle"; breakdown;}}}, // Add listeners of event listeners: {btnListeners: (function () {document.getElementById ('sidebar'). AddEventListener ("click", function (E) {self.evtListeners.btnColorChange ('sidebuttons'); E.target.className = "active";}) }}}}}}} Return;}) (); automationPageWrapper.listeners.btnColorChange ();});