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];
    }
}

IT goldman · Accepted Answer · 2022-11-04 22:23:22Z

1

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];
  }
}

answered Nov 4, 2022 at 22:23

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mich Over a year ago

THis is much simpler and it works, but I dont understand the syntax , why is (result, low, high, counter, i) at the beginning and at the end,

IT goldman Over a year ago

it's a definition of a function, and the call to that function. all in "one line". like (function(x){console.log(x)})(12)

Mich · Accepted Answer · 2022-11-04 22:29:00Z

0

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];
    }
}

answered Nov 4, 2022 at 22:29

Mich

3,7146 gold badges49 silver badges102 bronze badges

2 Comments

ethry Over a year ago

Please explain your code in an edit.

Mich Over a year ago

I can post it as an answer

Staz · Accepted Answer · 2022-11-04 22:44:02Z

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);
}

}

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related