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

Question

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.

There’s "1fr ".repeat(number). And there’s "repeat(…, 1fr)". You could use Custom properties. Your loop should work fine, though. Please edit your question and provide a minimal reproducible example. — Sebastian Simon
– Sebastian Simon, Commented Mar 6, 2022 at 22:45
Use let i in the beginning of for loop unless it's declared elsewhere. — zer00ne
– zer00ne, Commented Mar 6, 2022 at 22:57

connexo · Accepted Answer · 2022-03-06 23:33:08Z

3

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

answered Mar 6, 2022 at 23:33

connexo

57.2k15 gold badges112 silver badges149 bronze badges

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

2 Comments

SamuelOdan Over a year ago

Thanks for the detailed answer. It solves my problem perfectly. I'll read on the repeat function. Oh, I'd like to ask tho, is the trailing space removal a JavaScript thing?

connexo Over a year ago

Not in general, it's just how the setter for style properties works.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related