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

The element type is not valid: it should be a string for built-in components or a class/function for composite components, but it is currently an object in a React project

Iterate through a directory on the local machine and generate elements dynamically

Having trouble getting SCSS to function properly? (Updated Code)

Mastering the art of carousel div creation with Bootstrap

Ways to differentiate between buttons in a button cluster?

Hover-activated dropdown menu

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

Inconsistency in field generation in WordPress Contact Form 7 causing issues

The image must be able to fit within the div container without distorting its proportions

What could be causing the dysfunction of the jQuery class adding function?

How can we avoid re-rendering the same component repeatedly when using React Router v6?

Struggling to access FormData in php

Exiting a NodeJs function entirely rather than just returning from an internal function

Ways to exhibit API information leveraging the prowess of Ajax

Aligning Text to the Right Using CSS

The hover state of a div will not be lost if its parent element is not being hovered over

Learn how to call class methods using jQuery events by utilizing the on() method

Unique Symbols and Characters in JavaScript

Create a rectangular container with text using CSS

IE does not render the output of multiple AJAX requests