可变颜色不根据值改变

Question

我正在尝试根据值将颜色分配给 HTML 变量。从 JSON 中选取的值很好，但颜色没有改变。

这里是调用变量并赋值的脚本：

<script>
  var xmlcurrgct = new XMLHttpRequest();
  var urlcurrgct = "../json/currgct.json";
  xmlcurrgct.onreadystatechange = function() {
    if (xmlcurrgct.readyState == 4 && xmlcurrgct.status == 200) {
      console.log("xmlcurrgct.responseText", xmlcurrgct.responseText);
      var obj1 = JSON.parse(xmlcurrgct.responseText);
      console.log("obj1", obj1);
      document.getElementById("currgct").innerHTML = obj1.text.currgct;
    }
  }
  xmlcurrgct.open("GET", urlcurrgct, true);


  var color;
  switch (currgct) {
    case "UP":
      color = "yellow";
      break;
    case "DOWN":
      color = "red";
      break;
  };
  xmlcurrgct.send();;
</script>

我不确定我是什么 missing.The 变量可以有 2 个值 UP 或 DOWN。

JSON:
{"text":{"currgct":"UP"}}

谁能帮我找出我哪里出错了？

Answer 1

试试这个：

var xmlcurrgct = new XMLHttpRequest();
var urlcurrgct = "../json/currgct.json";
xmlcurrgct.onreadystatechange = function () {
    if (xmlcurrgct.readyState == 4 && xmlcurrgct.status == 200) {
        console.log("xmlcurrgct.responseText", xmlcurrgct.responseText);
        var obj1 = JSON.parse(xmlcurrgct.responseText);
        console.log("obj1", obj1);
        document.getElementById("currgct").innerHTML = obj1.text.currgct;

        // You need to wait for the asynchronous response.
        var color;
        switch (obj1.text.currgct) {
            case "UP":
                color = "yellow";
                break;
            case "DOWN":
                color = "red";
                break;
        };

        document.getElementById("currgct").setAttribute("style", "color: " + color + ";");
    }
}
xmlcurrgct.open("GET", urlcurrgct, true);
xmlcurrgct.send();

可变颜色不根据值改变

Variable color not changing based on Value

html

css

jquery

json

xmlhttprequest