Change text colour if number positive in javascript

Question

I am loading data from a JSON using javascript. I have managed to load everything into a table. For one column if the number is positive, I want the CSS color to change to green. Else, I want the color to be red. After searching from some questions, I tried the code below and it does not change the colors although the id is 100% correct (it is an ID and not a class). Also there is no !important line in my CSS:

var resultEl = document.getElementById('highlight');


    var resultVal = platform_data[i][3];
    resultEl.innerHTML = Number(resultVal);
    if (resultVal > 0) 
    {
        resultEl.style.color = "#99c63a!important";
    } else 
    {
        resultEl.style.color = "#c63a3a!important";
    }

I am expecting the above to work and I am not getting any errors in the console. I even tried removing the !important tag from the script.

Snippet:

var json_data = {"headers":["tt","tt","tt","tt","ttt","tt"],"rows":[["v2",226026.36999998972,221971.99999999144,0.01826523165083179,2407556.1300007524,514000],["v1",201656.91999999149,null,"NaN",272595.8799999832,323000],[" v3",185949.95999999763,173707.60999999757,0.07047676264730277,1896453.7399997683,434000],["v4",6889.369999999999,null,"NaN",6889.369999999999,null]]}

  var platform_data = json_data.rows; 
  var table = '<thead><tr><th><h1>AAA</h1></th><th><h1>BBBB</h1></th><th><h1>CCCC</h1></th><th><h1>DDDD</h1></th><th><h1>EEEE</h1></th><th><h1>FFFF</h1></th></tr></thead><tbody>';
  for (var i in platform_data)
	{
		table+='<tr>' + '<td>' + platform_data[i][0] + '</td>' + '<td>$' + platform_data[i][1].toFixed(2) + '</td>' + '<td>$' +  (platform_data[i][2] || 0).toFixed(2) + '</td>' + '<td class="highlight">' + (parseFloat(platform_data[i][3])*100).toFixed(2)  + '%</td>' + '<td>$'+ platform_data[i][4].toFixed(2) +'</td>'+ '<td>$'+ (platform_data[i][5] || 0).toFixed(2) +'</td>'+'</tr>';
	}
  
  table+= '</tbody>';
  document.getElementById("dynamic_table").innerHTML = table;
  





for (var i in platform_data)
	{
  var resultEl = document.getElementsByClassName("highlight")[i];
  
    var resultVal = Number(platform_data[i][3]);
    console.log(resultEl.innerHTML);
    if (resultVal > 0) 
    {
        resultEl.style.color = "#99c63a";
        console.log("green");
        
    } 
    else 
    {
        resultEl.style.color = "#c63a3a";
        console.log("red");
    }
}

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
overflow:hidden;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  line-height: 1.42em;
  color:#454545;
  text-transform:capitalize;
  background:#99C63A url('http://www.fitfactoryma.com/FitFactory/media/SiteResources/redesign/join-now.jpg');
}

#dynamic_table th h1 {
	  font-weight: bold;
	  font-size: 1em;
  text-align: left;
  color: #454545;
}

#dynamic_table td {
	  font-weight: normal;
	  font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #99C63A;
	   -moz-box-shadow: 0 2px 2px -2px #99C63A;
	        box-shadow: 0 2px 2px -2px #99C63A;
}

#dynamic_table {
	  text-align: left;
	  overflow: hidden;
	  width: 99%;
	  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

#dynamic_table td, #dynamic_table th {
	  padding-bottom: 2%;
	  padding-top: 2%;
  padding-left:2%;  
}

/* Background-color of the odd rows */
#dynamic_table tr:nth-child(odd) {
	  background-color: #fff;
}

/* Background-color of the even rows */
#dynamic_table tr:nth-child(even) {
	  background-color: #fff;
}

#dynamic_table th {
	  background-color: #f1f1f1;
}

#dynamic_table td:first-child { color: #99C63A; }

<table id="dynamic_table"></table>

UPD: I have to make the code for class and not id. I have update the snippet.

Answer 1

You adding <td class="highlight"> in table variable

But getting element by id

var resultEl = document.getElementById('highlight')

Just traverse the highlight class

[]
  .slice
  .call(document.querySelectorAll('.highlight'))
  .forEach(function (el) {
    // check value here
    var elValue = el.textContent.replace('%', '')
    if (Number(elValue) > 0) {
      el.style.color = 'red'
    } else {
      el.style.color = 'blue'
    }
  })