Changing class based on data from API-CodePudding

I updated this with the current answer and it still doesnt change the class on the UVIndex

function showUvIndex(data){

let UVInumber = Math.round(data.current.uvi);

uvIndex.classList = "btn btn-lg";

if (UVInumber == 11) {
    uvIndex.classList.add('extreme');
  } else if ([8, 9, 10].includes(UVInumber)) {
    uvIndex.classList.add('very-high');
  } else if ([6, 7].includes(UVInumber)) {
    uvIndex.classList.add('high');
  } else if ([3, 4, 5].includes(UVInumber)) {
    uvIndex.classList.add('moderate');
  } else if ([0, 1, 2].includes(UVInumber)) {
    uvIndex.classList.add('low');
  };

console.log(UVInumber);

};

CodePudding user response：

You are using incorrect syntax in your if statements, you cannot compare your UVInumber with set of values in that way.

Here is a valid example

if (UVInumber == 11) {
  uvIndex.classList.add('extreme');
} else if ([8, 9, 10].includes(UVInumber)) {
  uvIndex.classList.add('very-high');
} else if ([6, 7].includes(UVInumber)) {
  uvIndex.classList.add('high');
} else if ([3, 4, 5].includes(UVInumber)) {
  uvIndex.classList.add('moderate');
} else if ([1, 2].includes(UVInumber)) {
  uvIndex.classList.add('low');
}

And here is a more read-friendly example

const UVInumber = 10;

const classMap = [{
    class: "extreme",
    values: [11]
  },
  {
    class: "very-high",
    values: [8, 9, 10]
  },
  {
    class: "high",
    values: [6, 7]
  },
  {
    class: "moderate",
    values: [3, 4, 5]
  },
  {
    class: "low",
    values: [1, 2]
  }
];

const classToAdd = classMap.find(x => x.values.includes(UVInumber)).class;

console.log(classToAdd)

CodePudding user response：

You are using incorrect syntax in your if statements, you cannot compare your UVInumber with set of values in that way.