title: Change color of a variable based on the value
body: <p>First of all, I am sorry if my question is very simple but I am just beginning to learn and understand things.</p>
  <p>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:</p>
  <pre><code>&lt;div id=&quot;error&quot;&gt;0&lt;/div&gt;
  </code></pre>
  <p>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:</p>
  <pre><code>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 &lt; 0) score = 0;
      var x = score.toFixed (0) + '%';
      if (opt.scal)
          x = goodNotes +'-'+ perr + (opt.tmng ? '-'+ ptim : '') +'='+ x +' of '+ numNotes;
      $error.innerHTML = x;
  }
  </code></pre>
  <p>What I would like is that the  in the html would be shown in red color if &lt;=49, blue if &gt;=50 &amp;&amp; &lt;85, and green if &gt;=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.</p>
  <p>Thank you.</p>