Как изменить цвет значка в зависимости от значения, которое он показывает - PullRequest
Новая
       3

Как изменить цвет значка в зависимости от значения, которое он показывает

0 голосов
/ 30 марта 2019

Я проектирую интерфейсную часть веб-сайта, используя HTML, Bootstrap 3 и jQuery.Я хочу изменить цвет значка в зависимости от его значения (оно будет принимать значение из базы данных в будущем, а пока оно в HTML), но сейчас оно не работает.

У меня есть это в моем файле HTML 

<span class="badge" id = "rating" onload="ratingColor()">Rating: 0/10</span>

И это в моем файле js 

function ratingColor() {
    var a=document.getElementsById("rating");
    var num=a.charAt(8);
    if(num<5){
        a.className ="badge badge-error";
    }
    else if(num<7 && num>5){
        a.className ="badge badge-warning";
    }
    else{
        a.className ="badge badge-success";
    }
}

Почему это не работает?Он просто сохраняет свой серый цвет.Спасибо!

1 Ответ

0 голосов
/ 30 марта 2019

Поместите onload в элемент body и оберните в него свой элемент. 

ratingColor = () => {
  let el = document.getElementById("rating");
  let num = el.innerText.match(/Rating: ([0-9]+)\//)[1];

  if (num < 5) {
    el.className = "badge badge-error";
  } else if (num < 7 && num > 5) {
    el.className = "badge badge-warning";
  } else {
    el.className = "badge badge-success";
  }
}
<body onload="ratingColor()">
  <span class="badge" id="rating">Rating: 3/10</span>
</body>

Или, если вам нужно, чтобы onload применялся только к элементу <span/>, вы можете сделать: 

ratingColor = () => {
  let el = document.getElementById("rating");
  let num = el.innerText.match(/Rating: ([0-9]+)\//)[1];

  if (num < 5) {
    el.className = "badge badge-error";
  } else if (num < 7 && num > 5) {
    el.className = "badge badge-warning";
  } else {
    el.className = "badge badge-success";
  }
}
document.getElementById("rating").onload = ratingColor();
<span class="badge" id="rating">Rating: 3/10</span>

Надеюсь, это поможет,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...