Change gradient-color1 of graident rectangle from javascript code?

[robdquick]

Hi,

I'm trying to change the gradient colours of a gradient rectangle from the index.js code file.

index.gui

 <gradientRect id="gradientRectangleHeart" class="blue1"/>

styles.css

#gradientRectangleHeart {  
  width: 130;
  height: 130;
  x: 212;
  y: 122;  
}

.blue0 {
  gradient-type: linear;
  gradient-x1: 0; 
  gradient-y1: 50;
  gradient-x2: 0; 
  gradient-y2: 100%-50;  
  gradient-color1: #3399ff;
  gradient-color2: #4da6ff;
}



.blue1 {
  gradient-type: linear;
  gradient-x1: 0; 
  gradient-y1: 50;
  gradient-x2: 0; 
  gradient-y2: 100%-50;  
  gradient-color1: #4da6ff;
  gradient-color2: #66b3ff;
}

index.js

const gradientRectangleHeart = document.getElementById("gradientRectangleHeart");

I've tried a few different things:

gradientRectangleHeart.style.gradient-color1 = "#3399ff";

gives an '';' expected.' error (presumably because it sees the - in the gradient-color text and this cancels it out)

gradientRectangleHeart.setAttribute("class", "blue0");

gradientRectangleHeart.className = "blue0";

Tried to change the class of the rectangle in the 2 ways above. setAttribute game me this error: 'Unhandled TypeError: Expected a function.'. .className didn't give me an error, but the gradient of the rectangle never changed.

I have checked and double checked that I have all the names right, and that I'm not missing any ; anywhere or anything like that. Outputting code to the console shows that the code is working, no crashes, it's just not changing the gradient.

Anybody know how to go about doing this?

[Mark-D]

Have you tried simply

gradientRectangleHeart.class = "blue0";

without 'Name'?

[robdquick]

Using just .class give me an error:

Unhandled TypeError: Invalid argument type.

Thanks for the suggestion though! Starting to think that this isn't possible and I'll just have to stick with changing the .fill on a normal single colour rectangle.

[Mark-D]

Have just tried this too. Am also getting the same error as you when I use '.class'. If you use any obviously invalid name such as '.wibble' you get no error at all. So I'm wondering if '.class' is correct, but that we're passing is the wrong type of value to it as the error suggests.

Thing is, I've tried several different types of value and none of them work. Does make me think that there is something that can be passed though.

[robdquick]

I've tried a load of variations of .class and .className and I can't get anything to work. Apparently .class isn't valid as it's a reserved javascript keyword.

[NicholasConrad]

Hi Rob,

try:

gradientRectangleHeart.gradient.colors.c1 = "#3399ff";

Further reading: https://dev.fitbit.com/build/reference/device-api/document/#interface-gradient

[cph015]

@NichThis may be an old thread, but you are still very relevant! Thank you!

[Krish_2009]

It can be done simply like this:

gradientRectangleHeart.gradient.colors.c1 = "you color hex code here"

If this answer works please mark this post as a Best Answer.  ~ K.K Designs