Looping an array of modals in Javascript

Question

I'm having trouble looping the following function. It works when changing i='x' for each 1,2,3... However, when trying to loop for 'i', it becomes unresponsive. I feel there's something obvious I'm missing!

var i=1;
var modal = [];
var btn = [];
var span = [];
//for(i=1;i<5;i++)
//{
modal[i]= document.getElementById('challenge'+i+'Modal');
btn[i] =document.getElementById("challenge"+i);
span[i] = document.getElementById('challenge'+i+'Close');


btn[i].onclick = function() {
  modal[i].style.display = "block";
}

span[i].onclick = function() {
  modal[i].style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal[i]) {
    modal[i].style.display = "none";
  }
}
//}

you have defined 1 only item in the array, if you define 5 from 0 to 5 then you'll can make work the for — Álvaro Touzón, Jan 08 '19 at 15:01
I see a infamous for loop problem. https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example And you keep overwriting window.onclick.... — epascarello, Jan 08 '19 at 15:02
@Alex I have a grid of challenges, each has a corresponding modal, btn, and span — C OBrien, Jan 08 '19 at 15:05

score 0 · Answer 1 · answered Jan 08 '19 at 15:21

Thanks @epascarello for the pointer, here is the solution:

var i;
var modal = [];
var btn = [];
var span = [];

function open(i) {
    return function() {
      modal[i].style.display = "block";
    }
}
function closex(i) {
    return function() {
      modal[i].style.display = "none";
    }
}
function close(i) {
    return function(event) {
      if (event.target == modal[i]) {
        modal[i].style.display = "none";
      }
    }
}

for(i=1;i<3;i++)
{
    modal[i]= document.getElementById('challenge'+i+'Modal');
    btn[i] =document.getElementById("challenge"+i);
    span[i] = document.getElementById('challenge'+i+'Close');

    // When the user clicks the button, open the modal 
    btn[i].onclick = open(i);

    // When the user clicks on <span> (x), close the modal
    span[i].onclick = closex(i);
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = close(i);
}

Looping an array of modals in Javascript

1 Answers1