javascript - .addEventListener breaking code after being added as a for loop to apply to different elements -

I am currently working with this code:

  var hexArray = [ "Hexa", "hexb", "hexc", "hexe", "hexf", "hexg", "hexh", "hexi", "hexj", "hexk", "hexl", "hexm "]; Burn burn "," burn "," burn "," burnc "," burnd "," burn "," burnf "," burng "," burnh "," burni "," burnj "," burnk "," burnl "," Bernum "]; Function zip (a, b, f) {for (var i = 0; i & lt; hexArray.length; i ++) {f (a [i], b [i]); }; } Inita = function () {document.getElementById ('hexa'). ClassName = 'wave'; }; Initb = function () {document.getElementById ('hexb'). ClassName = 'wave'; }; Etc ... document.getElementById ('hexa'). AddEventListener ('endend', inita, false); Document.getElementById ('hexa'). AddEventListener ('WebKit Animation End', inita, Incorrect); Document.getElementById ('hexab'). AddEventListener ('Annendand', Initb, Incorrect); Document.getElementById ('hexab'). AddEventListener ('WebKit AnimationEnd', Initb, Incorrect); Document.getElementById ('hexac'). AddEventListener ('Annendand', Initac, False); Document.getElementById ('hexac'). AddEventListener ('WebKit AnimationEnd', Initax, Incorrect); Document.getElementById ('hexade'). AddEventListener ('Animated', Inited, False); Document.getElementById ('hexade'). AddEventListener ('WebKit Animation End', initd, false); Etc ... zip (hexare, burner, function (x, y) {document.getElementById (x) .className = 'transtart' + y;});  

And it works just fine. But trying to do this I am trying to cut down my code: hexArray = ["hexa", "hexb", "hexc", "hexd", "hexe"

  "," Hexf "," hexag "," hex "," hexy "," hexage "," hex "," hexal "," hexum "]; Burn burn "," burn "," burn "," burnc "," burnd "," burn "," burnf "," burng "," burnh "," burni "," burnj "," burnk "," burnl "," Bernum "]; OnitArray = ["inita", "initb", "initc", "initd", "inite", "initf", "initg", "inith", "initi", "initj", "initk", "initl "," Initm "]; Function zip (a, b, f) {for (var i = 0; i & lt; hexArray.length; i ++) {f (a [i], b [i]); }; } Inita = function () {document.getElementById ('hexa'). ClassName = 'wave'; }; Initb = function () {document.getElementById ('hexb'). ClassName = 'wave'; }; e.t.c. Zip (hexare, int array, function (x, y) {document.getElementById (x) .addEventListener ('animeend', y, false); document getElementById (x) .addEventListener ('WebKit AnimationAnd', Y, false); }); Zip (hexare, burner, function (x, y) {document.getElementById (x) .className = 'transtart' + y;});  

And now the BurnArray zip function does not spit output correctly and never sets css animation for it. Is there any reason. Can AddEventListener not be set to loop? Is there something to do with the variable that uses it?

As you have it in your modified code

  zip ( Hexare, init array, function (x, y) {document.getElementById (x) .addEventListener ('Animmeend', Y, false); document getElementById (x) .addEventListener ('WebKit Animationand', y, false);}) ;  

The y string is not a variable.

However, if you want to become a function object

after setting the INTA, keep the following, Initb, etc. Note that there is no quote "

  var initArray = [init, initb, initc, initd, initeb, initf, initg, inith, initiate, initj, initk, initl, initm];  

i.e.

  inita = function () {document.getElementById ('hexa') className = 'wave';.}; Initb = function () {Document.getElementById ('hexb'). ClassName = 'wave'; }; Etc ... var initArray = [inita, initb, initc, initd, inite, initf, initg, inith, initial, initj, initk, initl, initm];  

< / Html>