Is there a way to assign a color class based on the element's value without looping through all elements?
Check out my jsfiddle
HTML
<div>
<ul>
<li class="MyScore">90</li>
<li class="MyScore">82</li>
<li class="MyScore">77</li>
<li class="MyScore">66</li>
<li class="MyScore">62</li>
<li class="MyScore">50</li>
<li class="MyScore">42</li>
<ul>
</div>CSS
.good{
background-color: green;
}
.okay{
background-color: yellow;
}
.bad{
background-color: red;
}JS
function scoreColor(score){
var score = document.querySelector('.MyScore').innerHTML;
var scoreColor = document.querySelector('.MyScore');
if(score > 85){
scoreColor.className + ' good';
console.log('good');
} else if(score > 65 && score < 85 ){
scoreColor.className + ' okay';
console.log('okay');
} else {
scoreColor.className + ' bad';
console.log('bad');
}
}
scoreColor();Thanks