Ytukyg

I am trying to iterate over a number of DIVS, pull a numeric value from said DIVs, if that value is == to a specific value in the JS, apply a specific CSS Class back to the DIV it came from.

This is the code I have so far

const getRating = document.getElementsByClassName('my-ratings');

let getRatingValues = ;

for(var i = 0; i < getRating.length; i++) {

    getRatingValues += getRating[i].textContent;



    if (getRatingValues == 5) {

        getRating.classList.add('rating-5');

    }

    if (getRatingValues == 4) {

        getRating.classList.add('rating-4');

    }

    if (getRatingValues == 3) {

        getRating.classList.add('rating-3');

    }

    if (getRatingValues == 2) {

        getRating.classList.add('rating-2');

    }

    if (getRatingValues == 1) {

        getRating.classList.add('rating-1');

    }

}

I feel like I am close, but just can't break the back of it...

At the moment, the script seems to fill the getRatingValues as a string, so if I have values of 5, 3, 1, 2, 2, 4 the getRatingValues will be 531224. Could someone point me in the right direction please?

DRY - and cast to number:

let getRatingValues = 0;

document.querySelectorAll('.my-ratings').forEach(function(rate) { // for each my rating

  let val = rate.textContent; // get the rate

  getRatingValues += isNaN(val)?0:+val; // convert to number if is IS a number and add

  rate.classList.add('rating-'+val); // add the class - here or outside the loop?

})

I would have thought getRating.classList.add('rating-'+val); should be outside the loop since now you will get 5 classes on one div if all 5 are set

For IE you need

var ratings = document.querySelectorAll('my-ratings');

for (var i=0;i<ratings.length;i++) {

  let val = ratings[i].innerText, rate = ratings[i];

You need to convert the string to Number.

Change

getRatingValues += getRating[i].textContent;

to

getRatingValues += Number(getRating[i].textContent);

Also, your getRatingValues should not be initialized to , instead it should be

let getRatingValues = 0;

Like my comment you can optimize your code very easy:

that optimized Code:

const getRating = document.getElementsByClassName('my-ratings');

for(var i = 0; i < getRating.length; i++) {

    getRatingValues += Number(getRating[i].textContent);   

    if (getRatingValues !== undefined) {

        getRating.classList.add('rating-' + i);

    }

}

Try parseInt

getRatingValues += parseInt(getRating[i].textContent);

Reference : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt