Attempting to transform a numerical value into CSS syntax

Question

Attempting to transform a numerical value into CSS syntax

Currently, I am attempting to loop through several DIV elements, extract a numerical value from each DIV, and then based on that value matching a specific value in the JavaScript code, assign a particular CSS Class back to the original DIV.

This is the snippet of code I have been working on:


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 very close to solving this issue, but just can't quite figure it out...

Currently, it appears that the script is treating the values in getRatingValues as a string. For example, if I have values of 5, 3, 1, 2, 2, 4 in my DIVs, the getRatingValues will be '531224'. Can someone please help guide me in the right direction?

javascript css

Answer 1

Answer №1

Keeping it DRY - convert to numbers:

let totalRatings = 0;
document.querySelectorAll('.my-ratings').forEach(function(rating) { // iterate through ratings
  let value = rating.textContent; // retrieve the rating value
  totalRatings += isNaN(value) ? 0 : +value; // check if value is a number and add it to total
  rating.classList.add('rating-' + value); // should this be added outside the loop?
})

I personally believe

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

should be placed outside the loop to avoid adding multiple classes on the same element.

In order to support IE, you can use:

var allRatings = document.querySelectorAll('.my-ratings');
for (var j=0; j<allRatings.length; j++) {
  let value = allRatings[j].innerText;
  let rateElement = allRatings[j];

Answer 2

Keeping it DRY - convert to numbers:

let totalRatings = 0;
document.querySelectorAll('.my-ratings').forEach(function(rating) { // iterate through ratings
  let value = rating.textContent; // retrieve the rating value
  totalRatings += isNaN(value) ? 0 : +value; // check if value is a number and add it to total
  rating.classList.add('rating-' + value); // should this be added outside the loop?
})

I personally believe

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

should be placed outside the loop to avoid adding multiple classes on the same element.

In order to support IE, you can use:

var allRatings = document.querySelectorAll('.my-ratings');
for (var j=0; j<allRatings.length; j++) {
  let value = allRatings[j].innerText;
  let rateElement = allRatings[j];

Answer 3

Answer №2

To solve this issue, you must ensure that the string is converted to a Number.

Revise

getRatingValues += getRating[i].textContent;

with

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

Furthermore, do not initialize your getRatingValues to []; instead, set it as

let getRatingValues = 0;

Answer 4

To solve this issue, you must ensure that the string is converted to a Number.

Revise

getRatingValues += getRating[i].textContent;

with

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

Furthermore, do not initialize your getRatingValues to []; instead, set it as

let getRatingValues = 0;

Answer 5

Answer №3

Utilize the parseInt function

total += parseInt(values[i].textContent);

For more information, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 6

Utilize the parseInt function

total += parseInt(values[i].textContent);

For more information, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Attempting to transform a numerical value into CSS syntax

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing difficulties with a callback function while making a jQuery getJSON request via AJAX

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

Having trouble accessing NWJS modules with your new windows?

Latest news on KnockoutJS enhancements

Error message malfunction on the Express.js server side

Create a moving background gradient with styled-components

Grid alignment issue with images on Bootstrap 4.0 - resolution needed

Having trouble with React testing-library: Why is the file upload empty when testing a PDF file?

Revise the form used to edit data stored in Vuex and accessed through computed properties

There seems to be an issue with loading data for the grid from the JSON

Show various columns in Select2

vue form is returning empty objects rather than the actual input data

The alignment of Bootstrap Select dropup with search results is off

Utilize SectionList and a custom header view on Y to achieve a translation effect that creates a visually appealing empty space as

Calculate the total number of blank input boxes within a specific row of the table

How can we dynamically resize page content to fit varying browser window sizes across different devices with the help of jQuery/JavaScript?

I tried setting ajax async to false, but it doesn't seem to be functioning

Unable to access variables beyond the function scope results in an undefined value

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9