Does the Addition Assignment Operator work when adding CSS styles in JavaScript?

user_17647977 0
Viewed 85

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.

css dom html javascript
1 Answers

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)`;
user_37443040
Related