First of all, I am sorry if my question is very simple but I am just beginning to learn and understand things.

I have an open source project that I am trying to adapt with small details like changing style and translating text elements. So far so good. But I am not able to achieve to change the color of an html element based on the output value. In the html file, the line that refers to that field is:

<div id="error">0</div>

There is a Javascript file that makes the hard work of the project. This is the function where I believe I should add what I need:

function showScore () {
    if (!numNotes) return;
    const perr = errorCount * opt.pnlerr, ptim = lateNotes * opt.pnltim;
    var score = 100 * (goodNotes - perr - (opt.tmng ? ptim : 0)) / numNotes;
    if (score < 0) score = 0;
    var x = score.toFixed (0) + '%';
    if (opt.scal)
        x = goodNotes +'-'+ perr + (opt.tmng ? '-'+ ptim : '') +'='+ x +' of '+ numNotes;
    $error.innerHTML = x;
}

What I would like is that the in the html would be shown in red color if <=49, blue if >=50 && <85, and green if >=85. I don't know if I should create a different function or I just need to add a couple of lines with the if formula to that function. I have tried but id didn't work.

Thank you.

First of all, I am sorry if my question is very simple but I am just beginning to learn and understand things.

I have an open source project that I am trying to adapt with small details like changing style and translating text elements. So far so good. But I am not able to achieve to change the color of an html element based on the output value. In the html file, the line that refers to that field is:

<div id="error">0</div>

There is a Javascript file that makes the hard work of the project. This is the function where I believe I should add what I need:

function showScore () {
    if (!numNotes) return;
    const perr = errorCount * opt.pnlerr, ptim = lateNotes * opt.pnltim;
    var score = 100 * (goodNotes - perr - (opt.tmng ? ptim : 0)) / numNotes;
    if (score < 0) score = 0;
    var x = score.toFixed (0) + '%';
    if (opt.scal)
        x = goodNotes +'-'+ perr + (opt.tmng ? '-'+ ptim : '') +'='+ x +' of '+ numNotes;
    $error.innerHTML = x;
}

What I would like is that the in the html would be shown in red color if <=49, blue if >=50 && <85, and green if >=85. I don't know if I should create a different function or I just need to add a couple of lines with the if formula to that function. I have tried but id didn't work.

Thank you.

• javascript
• html

• I guess you are trigerring the showScore function via a button or something, right? if you want to change the styling of the html element, then get the element using DOM getElementById and change the color of it based on your result. – T. Jami Commented Jul 14, 2021 at 11:29
• Based on the condition add a class to the element with element.classList.add('red') (for example), and include that class in your CSS file. – Andy Commented Jul 14, 2021 at 11:29

4 Answers 4

Please follow the showScore() function as below.

function showScore () {
    if (!numNotes) return;
    const perr = errorCount * opt.pnlerr, ptim = lateNotes * opt.pnltim;
    var score = 100 * (goodNotes - perr - (opt.tmng ? ptim : 0)) / numNotes;
    var color = "red";
    if (score < 0) score = 0;
    if(score<=49)
      color = "red";
    else if(score>=50 && score<85)
      color = "blue";
    else
      color = "green";
    var x = '<span style="color:'+color+'">'+score.toFixed (0) + '%</span>';
    if (opt.scal)
        x = goodNotes +'-'+ perr + (opt.tmng ? '-'+ ptim : '') +'='+ x +' of '+ numNotes;
    $error.innerHTML = x;
}

you can try this.

 var div = document.getElementById( 'myDiv' );
    if (score >= 85) {
        div.style.color = 'blue';
    }

like so

const color = x <= 49 ? "#f00" : x >= 85 ? "#0f0" : "#00f";

$error.style.color = color;
**or**
document.querySelector("#error").style.color = color; 

i think that "$error" means you're using jquery, and i'm not familiar with it, so if the first option doesn't work the second one will do it

try this

let element = document.querySelector("#error");
let score = 20;
element.innerText = score;
if (score > 0) {
  element.style.color = "red"
}
if (score > 50) {
  element.style.color = "blue"
}
if (score > 85) {
  element.style.color = "green"
}

<div id="error">0</div>