Can I use for loop iterator as an array index in javascript?

Question

Javascript For loop not working while using the iterator (i) as an array index

boxes = document.getElementsByClassName("menoe");
imgs = document.getElementsByClassName("course_image");
butns = document.getElementsByClassName("continue_learning");
function meraj (imgs, butns, i) {
  imgs[i].style.opacity = "0.1";
  butns[i].style.visibility = "visible";
}
function merajo (imgs, butns, i) {
  imgs[i].style.opacity = "1";
  butns[i].style.visibility = "hidden";
}
for (i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("mouseover", meraj(imgs, butns, i));
  boxes[i].addEventListener("mouseout", merajo(imgs, butns, i));
}

Are you suer that ```document.getElementsByClassName("menoe");``` returns more than one element ? — Krzysztof Kaczyński, Feb 25 '20 at 23:20
Curser as array index? Looks like you are using 'i' as the index. Also by not working, what is the issue you are getting? — Spangle, Feb 25 '20 at 23:21
Yes it returns many elements, I have checked it and it does not even work on the first one — Omar G. Goda, Feb 25 '20 at 23:23
@Spangle i is the cursor in for loop and also passed as an argument to functions inside the loop It does not give any errors in the console as undefined or smth like that, just not working — Omar G. Goda, Feb 25 '20 at 23:25
add ```console.log(boxes.length)``` and check will it log more than 1 — Krzysztof Kaczyński, Feb 25 '20 at 23:37
So now add ```console.log(i)``` inside this for loop if it prints ```i``` 31 times it means that a problem is not with for loop — Krzysztof Kaczyński, Feb 25 '20 at 23:42
So it is not a problem with for loop. You should change the question because now I do not know what is your problem and how can I help you — Krzysztof Kaczyński, Feb 25 '20 at 23:45
I think the problem is about the possibility of passing a variable as an array index in Javascript — Omar G. Goda, Feb 25 '20 at 23:49
By the way, you should see this: https://stackoverflow.com/questions/5717126/var-or-no-var-in-javascripts-for-in-loop — Hektor, Feb 26 '20 at 04:30
@Hektor , Thanks I finally found that the problem is with the addEventListener method in javascript, the second argument can include only the name of the call function without any parenthesis or parameters. I have figured out a solutionand posted it in my answer below. Tell me what do you think. — Omar G. Goda, Feb 26 '20 at 23:31

score 0 · Answer 1 · answered Feb 26 '20 at 23:28

I have solved the problem and this is the final solution:

meraj = function meraj (imgs, butns, i) {
  imgs[i].style.opacity = "0.1";
  butns[i].style.visibility = "visible";
}
merajo = function merajo (imgs, butns, i) {
  imgs[i].style.opacity = "1";
  butns[i].style.visibility = "hidden";
}
function addListenerWithArgs(elem, evt, func, var1, var2, var3){
  var f = function(ff, v1, v2, v3){
    return (function (){
      ff(v1, v2, v3);
    });
  }(func, var1, var2, var3);
  elem.addEventListener(evt, f);
  return f;
}
for (i = 0; i < boxes.length; i++) {
  var storeFunc = addListenerWithArgs(boxes[i], "mouseover", meraj, imgs, butns, i);
  var storeFunc = addListenerWithArgs(boxes[i], "mouseout", merajo, imgs, butns, i);
}

Can I use for loop iterator as an array index in javascript?

1 Answers1