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
Post a Comment