I have some javascript here that basically loops through certain values on my page and adds a class depending on the value. This works perfectly on chrome and safari but on firefox it doesn't seem to work as it should. Im guessing there is a different way to write it for firefox to render it properly but can't seem to pin point the problem. I know this is something jQuery can handle for you but i want to just use javascript.
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.innerText, 10); // get the value from the text and parse it
if (score > 80) {
item.classList.add('great'); // add great 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();
You can compare this jsbin on different browsers to see what i mean.
