I tried to add "1fr " to a DOM element’s style many times using a for loop and the "+=" operator, but it only applied once, no matter how many times I ran the loop. So, I would like to know why it behaves this way. Here’s a little bit of my code.
for (i = 1; i <= number; i++){
sketchPadElement.style.gridTemplateColumns += "1fr ";
}
Since, I couldn’t get it to work, I wrote a function to repeat the string and used that to generate as many "1fr "s as I needed in one string like so.
function makeGrid(number) {
sketchPadElement.style.gridTemplateColumns = repeatString("1fr ", number);
}
And that works fine, but I’d still love to know why my previous attempt failed.
When assigning the string, any trailing space is automatically removed. So instead of using trailing space, use leading space:
for (let i = 1; i <= number; i++){
sketchPadElement.style.gridTemplateColumns += " 1fr";
}
But instead of looping, it's better to outright use the repeat() CSS function:
sketchPadElement.style.gridTemplateColumns = `repeat(${number}, 1fr)`;