Изменить цвет DIV в зависимости от текстового значения (из внешнего источника)

Question

Я получаю и отображаю числовое значение из внешнего источника (API). Теперь мне нужно, чтобы цвет текста изменился с КРАСНОГО на ЗЕЛЕНЫЙ, в зависимости от значения.

≥50 = красный & <50 = зеленый

У вас есть какие-нибудь идеи?

Крис

const api = "https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=county%20%3D%20%27SK%20stuttgart%27&outFields=cases,deaths,county,last_update,cases7_per_100k,recovered&returnGeometry=false&outSR=4326&f=json";

fetch(api).then((response) => {
  return response.json();
}).then((json) => {
  const cases = json.features[0].attributes.cases;
  const deaths = json.features[0].attributes.deaths;
  const cases7Per100k = json.features[0].attributes.cases7_per_100k;
  const recovered = json.features[0].attributes.recovered;
  const lastUpdate = json.features[0].attributes.last_update;
  console.log(cases7Per100k)
  document.getElementById("cases7Per100k").innerHTML = Math.round(cases7Per100k * 10) / 10 || 0;
});

<p id="cases7Per100k"></p>

javascript html css colors

0

ChrisG 11 Фев 2021 в 23:41

Answer 1

Вы можете установить цвет с помощью element.style.color. (Ссылка)

Следующее должно работать:

const api = "https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=county%20%3D%20%27SK%20stuttgart%27&outFields=cases,deaths,county,last_update,cases7_per_100k,recovered&returnGeometry=false&outSR=4326&f=json";

fetch(api).then((response) => {
  return response.json();
}).then((json) => {
  const { cases, deaths, cases7_per_100k, recovered, last_update } = json.features[0].attributes;
  console.log(cases7_per_100k)
  
  const p = document.getElementById("cases7Per100k");
  p.innerHTML = cases7_per_100k.toFixed(1) || 0;
  p.style.color = cases7_per_100k > 50 ? '#ff0000' : '#00ff00';
});

<p id="cases7Per100k"></p>

1

freakimkaefig 11 Фев 2021 в 20:56

Answer 2

Может быть, проверить возврат значения и применить стиль?

const api = "https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=county%20%3D%20%27SK%20stuttgart%27&outFields=cases,deaths,county,last_update,cases7_per_100k,recovered&returnGeometry=false&outSR=4326&f=json";

fetch(api).then((response) => {
  return response.json();
}).then((json) => {
  const cases = json.features[0].attributes.cases;
  const deaths = json.features[0].attributes.deaths;
  const cases7Per100k = json.features[0].attributes.cases7_per_100k;
  const recovered = json.features[0].attributes.recovered;
  const lastUpdate = json.features[0].attributes.last_update;
  console.log(cases7Per100k)
  let test = Math.round(cases7Per100k * 10) / 10 || 0;
  if ( test >= 50 ) {  document.getElementById("cases7Per100k").style.color='green';}
  else {  document.getElementById("cases7Per100k").style.color="red";}
  document.getElementById("cases7Per100k").innerHTML = test;
});

<p id="cases7Per100k"></p>

0

G-Cyrillus 11 Фев 2021 в 20:56

Изменить цвет DIV в зависимости от текстового значения (из внешнего источника)

2 ответа

Похожие вопросы

Новые вопросы

javascript