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];
}
}
CodePudding user response:
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];
}
}
CodePudding user response:
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];
}
}
CodePudding user response:
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);
}
}