Изменить цвет шрифта для положительных / отрицательных значений, которые импортируются из Google Sheets

Question

Вот мой код, который позволяет мне импортировать из моего Google Sheet, указав заголовки столбцов.

function httpGetAsync(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true); // true for asynchronous
  xmlHttp.send(null);
}

httpGetAsync('https://spreadsheet.glitch.me/?key=1JBbAHH1DFtO1r56lr94lUqd8H7qPcHncJskcPq0r96o', function(response) {
  var json = JSON.parse(response);

  document.getElementById("btm").innerHTML = json[0].btm;
  document.getElementById("AvgPoints").innerHTML = json[0].AvgPoints;
  document.getElementById("Overtakes").innerHTML = json[0].Overtakes;
  document.getElementById("podium").innerHTML = json[0].podium;
  document.getElementById("highest").innerHTML = json[0].highest;
});

Это позволяет мне поместить <div id="AvgPoints"></div> в мой HTML, и он заполняется на основе значения вмой документ Google Sheets.Моя цель - закрасить шрифт зеленым для положительных чисел (включая 0) и красным для отрицательных чисел.Возможно ли это, учитывая, что в моем коде HTMl нет числа между тегами <div></div>?Если это так, мне также было бы интересно узнать, как добавить +/- символы перед импортируемым числом, основываясь на том, является ли оно положительным / отрицательным.Извините, я пытаюсь учиться.Спасибо!

Answer 1

Просто преобразуйте значение в число, проверьте положительный или отрицательный, а затем вы можете присвоить элементу заранее подготовленный класс CSS, возможно добавив соответствующий символ + (я предполагаю, что отрицательные значения уже имеют - перед ними). ​​

// Get all the divs that should be styled into an array
let divs = Array.prototype.slice.call(document.querySelectorAll("#btm, #AvgPoints, #Overtakes, #podium, #highest"));

// Loop the array
divs.forEach(function(div){
  // Convert text to number and test for positive/negative
  if((+div.textContent) >= 0){
    div.classList.add("positive"); // Apply positive style
    div.textContent = "+" + div.textContent; 
  } else {
    div.classList.add("negative"); // Apply negative style  
  }
});

.positive { color: green; }
.negative { color: red; }

<div id="btm">135</div>
<div id="AvgPoints">0</div>
<div id="Overtakes">-17</div>
<div id="podium">1</div>
<div id="highest">-125</div>