this is my first question please go easy on me.
The issue I am having is I have a for each php loop to map out (populate) the divs based on how many customer profiles are in the database.
each div has the same class name, so... I use querySelectorAll('.customerBox') to create a NodeList with x amount of divs based on rows in the database.
With this I am able to change styles based on the index of each item.
Below is a quick example of the script i'm running to do this:
for (let i = 0; i < customerBox1.length; i++) {
(function(e){
openCustBoxBtn1[e].onclick = function(){
if(customerBox1[e].style.minWidth == '100%'){
custCreationBox.style.display = 'flex';
customerBox1[e].style.minWidth = '25%';
customerBox1[e].style.minHeight = '50%';
}
if(customerBox1[e].style.minWidth < '100%'){
custCreationBox.style.display = 'none';
customerBox1[e].style.minWidth = '100%';
customerBox1[e].style.minHeight = '100%';
}
}
})(i);
}
This works perfectly fine the only issue is that the function only runs for two clicks on any element, so lets say there are three elements (.customerBox1)'s... I can click the button within the box to make it take up the 'full screen' then if I click that button again and element (.customerBox1) at the index of whichever you clicked has a minWidth of 100% it will shrink back to its original size, BUT after this that individual element cannot be re-opened, but any other element at another index can.
gonna be honest I have a vague understanding of how this function works I found it here on stack overflow when searching how to run an onClick for querySelectorAll() at the index of the element you clicked.
Anything helps thank you, if you need more information please let me know. I tried to describe my issue as indepth as possible.
First of all this condition
customerBox1[e].style.minWidth < '100%'
It will not work as expected as you compare strings, you need map the value of minWidth to a number with parseInt(customerBox1[e].style.minWidth)
ex:
const minWidth = parseInt(customerBox1[e].style.minWidth)
if(minWidth === 100){
// code ...
}
if(minWidth < 100){
// code ...
}