Changing backgroud color depending on text value

Hi,
I am trying to change the color of background depends on brand’s name.
It seems not reading const elements = document.querySelectorAll(’#brand’);
sometimes I get Cannot read property error because it runs before html?

Thanks for your advise.

You can only have one item with a query selector of an id, which is why the current code doesn’t work. You have some options to change this to be working.

  1. styling via css: https://codesandbox.io/s/eloquent-dhawan-nxnny?file=/src/app.js

  2. styling via JS in the template: https://codesandbox.io/s/loving-sanne-jdc6c?file=/src/app.js

  3. styling via JS in transformItems: https://codesandbox.io/s/keen-borg-mrg7n?file=/src/app.js

Hope that clarifies the different strategies!

Hi,
My actual index is little more complicated so yours did not work.
I would like to change the color of objectType attribute.Screenshot 2020-12-23 110146 Screenshot 2020-12-23 110204
Eventually, it will be total 4 attributes.
News, Startup, Comment, Startup List

Please take a look.
nssc is the best search word to check both startUp and Startup List
Thank you very much!!

Hi @ynaka, you may have to use some creative css to get the results you want. You could store the value of the attribute in a variable and use that variable name in the class, the assign styles to that class. For instance, have a css class for ‘startup’ and add ‘startup’ to the class attribute of the div.