具有事件侦听器的ForEach函数

Question

I am trying to repeat less in my code. In some of my codes that have many elements, I feel like i'm doing too much. It's time I learned how to reduce code and follow DRY techniques.

The code below is how I am currently attaching eventListeners to my elements.

var at1, at2 ,at3 ,at4 ,at5 ,at6 , at7, at8,

at1 = UI.byId("at1");
at1.addEventListener("click", UI.at1Func, false);

at2 = UI.byId("at2");
at2.addEventListener("click", UI.at2Func, false);

at3 = UI.byId("at3");
at3.addEventListener("click", UI.at3Func, false);

at4 = UI.byId("at4");
at4.addEventListener("click", UI.at4Func, false);

at5 = UI.byId("at5");
at5.addEventListener("click", UI.at5Func, false);

at6 = UI.byId("at6");
at6.addEventListener("click", UI.at6Func, false);

at7 = UI.byId("at7");
at7.addEventListener("click", UI.at7Func, false);

at8 = UI.byId("at8");
at8.addEventListener("click", UI.at8Func, false);

I have been trying to use the forEach loop. But i am having issues with the function. For starters, it seems the function is being triggered preemptively. And because I expect the my main load to reflect any changes, it creates and infinite loop and crashes. I am using VS2015, and i try to write using plain JS without any libraries... please, no jquery.

Here is my attempt at the forEach loop: see edits at the bottom.

var ats = ['at1', 'at2', 'at3', 'at4', 'at5', 'at6', 'at7', 'at8'];
        ats.forEach(function (key) {
            var ele = UI.byId(key);
            ele.addEventListener("click", UI.atFunc(key), false);
        });

That function is in my "UI.myLoad" code block. Here is UI.atFunc(key)...

atFunc: function (key) {
    var value = localStorage.getItem(key);
        localStorage.setItem(key, value++);
        console.log(key);
        //UI.myLoad(); //commented out to prevent crashing for now.
    },

the expected behavior is that when any key is clicked, the value of 1 integer should be added to its perspective item in local storage, and UI.myLoad just loads the main themes, values, and timeouts on the app. But because my forLoop is in that code block, it is causing a crash. I moved it outside of the scope on UI.myLoad, but then it didn't work at all. Is there something wrong with the code? or am i going about this the wrong way and should attempt to just use a for loop instead? I've seen examples of the forEach working properly but i can't do it right myself.

[edit: The code below is a solution that used the accepted answer, but found another problem. The full solution is now identified.]

(function () {
var UI;
UI = {
byId: function (id) {
        return document.getElementById(id);
},
loadBtns: function () {
    var ats = ['at1', 'at2', 'at3', 'at4', 'at5', 'at6', 'at7', 'at8'];
    ats.forEach(function (key) {
        var ele = UI.byId(key);
        ele.addEventListener("click", UI.atFunc(key), false);
    });
},
myLoad: function () {
    //load and refresh elements
    /*
    var at1 = localStorage.getItem("at1");
        if (!at1) {
            spn1.innerText = 0;               
        }
        if (at1) {
            spn1.innerText = at1;
        }
    ....
    */
},
atFunc: function (key) {
        return function() {
            var value = localStorage.getItem(key);
            localStorage.setItem(key, +value + +1);
            UI.myLoad();
            };
    }
}
window.onload = function () {
    UI.myLoad();
    UI.loadBtns();
}
}())

Answer 1

Your problem stems from atFunc . The reason it's "being triggered preemptively" is because you're immediately calling the function.

ele.addEventListener("click", UI.atFunc(key), false);

What this does is runs the function UI.atFunc then returns the value of undefined . This basically translates your above line into:

UI.atFunc(key);
ele.addEventListener("click", undefined, false);

Instead, you want to return a function which captures the correct key. Since functions are just like any other value in JS, you can return one like this:

atFunc: function(key) {
  return function() {
    var value = localStorage.getItem(key);
    ...
  };
}

This way you return a new function value instead of a undefined and that function is bound to the click event.

Answer 2

The issue is the way the function is added in addEventListener .

In the first code, you correctly reference the function

at1.addEventListener("click", UI.at1Func, false);

But in the second code, you've added parentheses, and parentheses calls the function right away and returns the result, which would be undefined .

There are many ways to solve this, but probably the easiest in your case would be to modify the atFunc function with a closure and return a function

atFunc: function (key) {
    return function() {
        localStorage[key]++;
    }
},