Set a unique class for several elements depending on a given condition

Question

Set a unique class for several elements depending on a given condition

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

javascript html css

Answer 1

Answer №1

Take a look at this code snippet and check out the comments provided (fiddle):

 function highlightScores() {
     var scores = document.querySelectorAll('.MyScore'); // select all elements with .Myscore

     Array.prototype.forEach.call(scores, function (item) { // loop through the elements

         var score = parseInt(item.innerText, 10); // extract and parse the value from text

         if (score > 85) {
             item.classList.add('good'); // add 'good' to element's classList
             console.log('good');

         } else if (score > 65 && score < 85) {
             item.classList.add('ok'); // add 'ok' to element's classList
             console.log('ok');
         } else {
             item.classList.add('bad'); // add 'bad' to element's classList
             console.log('bad');
         }
     });


 }
 highlightScores();

Answer 2

Take a look at this code snippet and check out the comments provided (fiddle):

 function highlightScores() {
     var scores = document.querySelectorAll('.MyScore'); // select all elements with .Myscore

     Array.prototype.forEach.call(scores, function (item) { // loop through the elements

         var score = parseInt(item.innerText, 10); // extract and parse the value from text

         if (score > 85) {
             item.classList.add('good'); // add 'good' to element's classList
             console.log('good');

         } else if (score > 65 && score < 85) {
             item.classList.add('ok'); // add 'ok' to element's classList
             console.log('ok');
         } else {
             item.classList.add('bad'); // add 'bad' to element's classList
             console.log('bad');
         }
     });


 }
 highlightScores();

Answer 3

Answer №2

Here's a little something to try out:

let scores = document.querySelectorAll('.MyScore');
for (let x of Array.from(scores)) {
    let points = parseInt(x.innerHTML);
    if (points > 85){
        x.className = 'excellent';
    } else if (points > 65 && points < 85){
        x.className = 'good';
    } else {
        x.className = 'fair';
    }
}

The querySelectorAll method gathers all elements that match the specified criteria, and using Array.from helps arrange them into an array for easier handling.

Answer 4

Here's a little something to try out:

let scores = document.querySelectorAll('.MyScore');
for (let x of Array.from(scores)) {
    let points = parseInt(x.innerHTML);
    if (points > 85){
        x.className = 'excellent';
    } else if (points > 65 && points < 85){
        x.className = 'good';
    } else {
        x.className = 'fair';
    }
}

The querySelectorAll method gathers all elements that match the specified criteria, and using Array.from helps arrange them into an array for easier handling.

Set a unique class for several elements depending on a given condition

Answer №1

Answer №2

Similar questions

Navigating through the year selection with your keyboard

Modifying the status using retrieved JSON information

When using Vue.js router.push, the URL gets updated but the RankerDetail component does not refresh when navigating with a button

What is the best method for locating X-Path for elements inside a frameset?

Tips for using a JavaScript function to navigate to a specific division (<div>) on an HTML page

The response from a jQuery ajax call to an MVC action method returned empty

Information on the Manufacturer of Devices Using React Native

Create a link for editing in a data table that can filter based on multiple column values and also enable global search on specific custom

Ways to modify the gap between buttons using CSS

JavaScript: Remove just the specific user input without affecting the rest of the HTML block

Utilizing React JS to dynamically incorporate form values into objects

keep jquery scrolltop position consistent after receiving response

I am perplexed by the driver's inability to locate the element

React component fails to display content following execution of Jquery Ajax request

Dealing with errors in Next.js when using axios in Express

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

The use of Angular's ngClass directive does not work within the link function

Troubleshooting imagejpeg() Function Failure in PHP Server

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb