Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li class="MyScore">80</li>
    <li class="MyScore">70</li>
    <li class="MyScore">50</li>
    <li class="MyScore">60</li>
    <li class="MyScore">40</li>
    <li class="MyScore">99</li>
    <li class="MyScore">100</li>
    <li class="MyScore">20</li>
    <li class="MyScore">0</li>
    <li class="MyScore">5</li>
</ul>
​
</body>
</html>
 
.great{
        background-color:green;
    }
    .okay{
        background-color: yellow;
​
    }
    .bad{
        background-color: red;
    }
    .no-score{
        background-color: gray;
    }
 
function ranks() {
    var scores = document.querySelectorAll('.MyScore'); // get all elements with .Myscore
​
    Array.prototype.forEach.call(scores, function (item) { // iterate the elements
​
        var score = parseInt(item.textContent, 10); // get the value from the text and parse it
​
        if (score > 80) {
            item.classList.add('great'); // add good to the item classList
            
​
        } else if (score > 60 && score < 80) {
            item.classList.add('okay'); // add okey to the item classList
            
        } else if(score == 0) {
            item.classList.add('no-score'); // add bad to the item classList
            
        } else {
            item.classList.add('bad'); // add bad to the item classList
            
        }
    });
​
​
}
​
ranks();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers