如何根據顯示的值更改徽章顏色

Question

我正在使用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";
    }
}

為什么不起作用？ 它只是保持灰色。 謝謝！

Answer 1

將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>

希望有所幫助，

如何根據顯示的值更改徽章顏色

問題描述

1 個解決方案

解決方案1
0 2019-03-30 01:09:53

如何根據顯示的值更改徽章顏色

問題描述

1 個解決方案

解決方案1 0 2019-03-30 01:09:53

解決方案1
0 2019-03-30 01:09:53