Блог

Главная - Вопросы по программированию - Изменить цвет шрифта для положительных / отрицательных значений, импортируемых из Google Таблиц

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

#javascript #jquery #google-sheets #colors

#javascript #jquery #google-sheets #Цвет

Вопрос:

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

 function httpGetAsync(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 amp;amp; 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) и красный для отрицательных чисел. Возможно ли это, учитывая, что на самом деле между <div></div> тегами в моем HTML-коде нет числа? Если это так, мне также было бы интересно узнать, как добавлять символы / — перед импортированным числом в зависимости от того, является ли оно положительным / отрицательным. Извините, я пытаюсь учиться. Спасибо!

Ответ №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>

Комментарии:

1. Ах! Я вижу идеально. Есть ли способ сделать это без копирования и вставки всего этого для каждого имеющегося у меня идентификатора — поскольку .getElementById может содержать только 1 идентификатор. как я мог бы использовать что-то вроде document. Запрос selectorall для применения вашего кода к нескольким идентификаторам одновременно? Ценю вашу помощь!

2. @LiamThompson Вам нужно что-то общее для всех элементов, например класс, или вы могли бы использовать несколько селекторов, например document.querySelectorAll("#AvgPoints, #somethingElse, #somethingElse") , а затем просто перебирать результирующий список узлов и использовать мой код в цикле.

3. @LiamThompson Если мой ответ был полезен, пожалуйста, проголосуйте за него и подумайте о том, чтобы пометить его как ответ «the», нажав на галочку в левом верхнем углу ответа.

4. Я понимаю, что вы имеете в виду. В данный момент я пытаюсь это сделать., и мне удалось заставить первый идентификатор работать. Можете ли вы определить, почему другой не работает? let divs = document.querySelectorAll("#btm", "#AvgPoints"); [].forEach.call(divs, function(div) { // Convert text to number and test for positive/negative if(( div.textContent) >= 0){ div.classList.add("positive"); // Apply positive style } else { div.classList.add("negative"); // Apply negative style } });

5. @LiamThompson Вам не следует заключать каждое значение id в отдельный набор кавычек. Это должно быть просто: let divs = document.querySelectorAll("#btm, #AvgPoints"); в виде одной строки, разделенной запятой. В противном случае вы передаете несколько аргументов .querySelectorAll() , которые он не принимает.