Using javascript to change css classes dynamically

Hi there,

I am trying to change the background color of .overview element to either green, yellow or red based on a dynamic number.

How should I set up my CSS or JS differently to achieve those results?

I’ve labeled my element "overview-element:

Here’s what I currently have CSS as.

<style> {
        background-color: green;
    .overview-element.yellow {
        background-color: yellow;
    } {
        background-color: red;

And here is my JS:

// Get the number value
const number = 55; // Replace with your own number value

// Get the element to apply the CSS color
const element = document.getElementById('overview-element'); // Replace with your own element ID

// Remove existing color classes
element.classList.remove('red', 'yellow', 'green');

// Check the number value and add appropriate color class
if (number >= 0 && number <= 40) {
} else if (number >= 41 && number <= 75) {
} else {

On the published site I can’t get the background color to change the way I want. What can I do to make this work?

Here is my public share link: Webflow - The Attributes

Change that to

Wow two responses from @PixelGeek! Thank you.

I made the change but still can’t get it to work. Do I need to do something with the class name on the webflow viewer?