Ajax — изменение цвета текста на основе возвращаемого значения

#javascript #html #css #ajax #textcolor

Вопрос:

Я пытаюсь отобразить значение датчика с помощью html/ajax. Пока это работает так, как ожидалось, однако я хочу, чтобы цвет текста менялся в соответствии со значением. например

 if value < 50 then fontcolor= blue 
if value >49 then fontcolor = red
 

возможно ли это вообще?

 <p style="color:blue; position: absolute; top: 810px; width: 100px; padding-left: 340px;" id="ofen_VL">0</p>
<script>
setInterval(function() {
  // Call a function repetatively with 10 Second interval
getData();
}, 10000); //10sec

function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 amp;amp; this.status == 200) {
document.getElementById("ofen_VL").innerHTML =
  this.responseText;
}
 };
xhttp.open("GET", "ofen_VL.txt", true);
xhttp.send();
}

</script>
 

Ответ №1:

Добавьте к ответу свое состояние. Что-то вроде:

 if (this.readyState == 4 amp;amp; this.status == 200) {
  document.getElementById("ofen_VL").innerHTML = this.responseText;
  if (Number(this.responseText) > 50) {
    document.getElementById("ofen_VL").setAttribute('style', 'color: blue;');
  }
  else {
    document.getElementById("ofen_VL").setAttribute('style', 'color: red;');
  }
}