Применить «положительный» стиль к проценту, если положительный - извлечено из Google Sheets - PullRequest
Новая
       52

Применить «положительный» стиль к проценту, если положительный - извлечено из Google Sheets

0 голосов
/ 18 мая 2019

Я извлекаю данные (как числа, так и%) из Google Sheets, используя идентификаторы.Я пытаюсь применить стиль с помощью Javascript, который окрашивает данные в зеленый цвет, если он положительный, и в красный, если он отрицательный.Моя работа с Javascript идеально подходит для чисел, но не для процентов.

codepen: https://codepen.io/liamdthompson/pen/YbQRgv

    divs.forEach(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  
        }
    });  
    });

.positive {
  color: green;
}

.negative {
  color: red;
}

В настоящее время число «10 .2» отображается зеленым, а процент «2,00%» отображается черным(где стиль не работает).

1 Ответ

1 голос
/ 18 мая 2019

Вы можете добавить дополнительное условие, чтобы проверить, существует ли % в полученном значении или нет, и обработать его соответствующим образом. 

         if(div.textContent.includes('%')){
              div.textContent = div.textContent.split('%')[0];
            }

Проверить обновленный фрагмент 

.positive {
  color: green;
}
<div class="" id="QStreak"></div>
<div id="QStreak1"></div>

<!--JavaScript at end of body for optimized loading-->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script type="text/javascript">
      
 


  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=1mT_ILqpPtoCnWq5fEcBbVcgkKxcXN6uS9F2fsAO7imI', function(response) {
  var json = JSON.parse(response);

 //QStreak
      document.getElementById("QStreak").innerHTML = json[6].ThisWeek;
  document.getElementById("QStreak1").innerHTML = json[6].PriceChange;
 
  let divs = Array.prototype.slice.call(document.querySelectorAll("#QStreak, #QStreak1"));



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

  
  </script>
...