Javascript, creating button click function in a loop always gets the same values from variables

Question

I am working on a JavaScript function to create a pop up based on some data. The data in result is not important, and can be omitted for this purpose, but I am including it becasue of some additional questions

The idea is that I want to send a portion of the result array to each pop up when the corresponding button is clicked

I first tried it with v_popup["dataarray"] = result.slice(counter, indices[i] + counter); but in the pop up the array is always empty

Next I tried to create a var sub_array = result.slice(counter, indices[i] + counter); but this was always empty

Last attempt I just sent the entire array to pop-up and added low and high limit as variables. But again, the limits are always 93 and 94 in every instance of the pop up.

If I breakpoint on var high = indices[i] + counter; I can see the low and high variables are storing correct incremental limits each time, but for some reason if I breakpoint inside the onlick function, on v_popup["high"] = high; the low and high are always 93 and 94

Is it because there is only one function that gets created for all of the buttons,

Does this function not get created until I click on the button? Does it not get created while the for loop is running?

Also, do I need a different variable for each instance of the button, such as v_popup["dataarray1"], v_popup["dataarray2"],...etc

Next, how can I just copy a sliced array into the variable, so I don't need to set the limits

Final question, this works when I close the pop up between clicking on each button, but if the pop-up is left open, the window["dataarray"] variable becomes undefined, even though v_popup["dataarray"] = result is executed on every button click. Why is this, and how can I fix it?

function addTable(result, indices) {
    counter = 0;
    indices = [2,3,6,2,4,4,1,5,3,1,1,1,2,4,12,1,4,4,2,1,4,1,12,13,1,]; //for testing
    for (var i = 0; i < indices.length; i++) {
        let btn = document.createElement("button");
        btn.innerHTML = result[counter][0];
        btn.className = "button-28";
        var low = counter;
        var high = indices[i] + counter;
        btn.onclick = function () {

            var v_popup = window.open("popup.html", 'popUpWindow', 'height=300,width=700,left=50,top=50,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no, status=no')
            v_popup["dataarray"] = result;
            v_popup["low"] = low;
            v_popup["high"] = high;
            var sub_array = result.slice(counter, indices[i] + counter); //for test
        }
        counter += indices[i];
    }
}

Answer 1

Try this

function addTable(result, indices) {
counter = 0;
low = [];
high = [];
for (var i = 0; i < indices.length; i++) {

    let btn = document.createElement("button");
    btn.innerHTML = result[counter][0];
    btn.className = "button-28";
    var low = counter;
    var high = indices[i] + counter;
    var sub_array = result.slice(low, high);

    (function (sub_array) {
        btn.onclick = function () {

            var v_popup = window.open("popup.html", 'popUpWindow', 'height=300,width=700,left=50,top=50,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no, status=no')
            v_popup["dataarray"] = sub_array;
        }
    })(sub_array);

    counter += indices[i];
    td.appendChild(btn);
    tr.appendChild(td);
}

}

Answer 2

I did it this way, but I'm not sure its the best way

function addTable(result, indices) {
    counter = 0;
    low = [];
    high = [];
    for (var i = 0; i < indices.length; i++) {
        let btn = document.createElement("button");
        btn.innerHTML = result[counter][0];
        btn.className = "button-28";
        low[result[counter][0]] = counter;
        high[result[counter][0]] = indices[i] + counter;

        btn.onclick = function () {

            var v_popup = window.open("popup.html", 'popUpWindow', 'height=300,width=700,left=50,top=50,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no, status=no')
            var indx = i;
            v_popup["dataarray"] = result.slice(low[this.innerHTML], high[this.innerHTML]);

        }
        counter += indices[i];
    }
}

Answer 3

Let's take a copy of said variables to pass to the event handler. This is done using a function call. It's called an IIFE. Maybe you only need some of the parameters and not all of result, low, high, counter, i

function addTable(result, indices) {
  counter = 0;
  indices = [2, 3, 6, 2, 4, 4, 1, 5, 3, 1, 1, 1, 2, 4, 12, 1, 4, 4, 2, 1, 4, 1, 12, 13, 1, ]; //for testing
  for (var i = 0; i < indices.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = result[counter][0];
    btn.className = "button-28";
    var low = counter;
    var high = indices[i] + counter;

   
    (function(result, low, high, counter, i) {

      btn.onclick = function() {

        var v_popup = window.open("popup.html", 'popUpWindow', 'height=300,width=700,left=50,top=50,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no, status=no')
        v_popup["dataarray"] = result;
        v_popup["low"] = low;
        v_popup["high"] = high;
        var sub_array = result.slice(counter, indices[i] + counter); //for test
      }


    })(result, low, high, counter, i);

    counter += indices[i];
  }
}