javascript - ForEach function with event listener -


i trying repeat less in code. in of codes have many elements, feel i'm doing much. it's time learned how reduce code , follow dry techniques.

the code below how attaching eventlisteners 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 use foreach loop. having issues function. starters, seems function being triggered preemptively. , because expect main load reflect changes, creates , infinite loop , crashes. using vs2015, , try write using plain js without libraries... please, no jquery.

here attempt @ foreach loop: see edits @ 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 in "ui.myload" code block. here ui.atfunc(key)...

atfunc: function (key) {     var value = localstorage.getitem(key);         localstorage.setitem(key, value++);         console.log(key);         //ui.myload(); //commented out prevent crashing now.     }, 

the expected behavior when key clicked, value of 1 integer should added perspective item in local storage, , ui.myload loads main themes, values, , timeouts on app. because forloop in code block, causing crash. moved outside of scope on ui.myload, didn't work @ all. there wrong code? or going wrong way , should attempt use loop instead? i've seen examples of foreach working can't right myself.

[edit: code below solution used accepted answer, found problem. full solution 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 , 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(); } }()) 

your problem stems atfunc. reason it's "being triggered preemptively" because you're calling function.

ele.addeventlistener("click", ui.atfunc(key), false); 

what runs function ui.atfunc returns value of undefined. translates above line into:

ui.atfunc(key); ele.addeventlistener("click", undefined, false); 

instead, want return function captures correct key. since functions other value in js, can return 1 this:

atfunc: function(key) {   return function() {     var value = localstorage.getitem(key);     ...   }; } 

this way return new function value instead of undefined , function bound click event.


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -