无法更改JavaScript中的特定文本颜色

Question

Here is my code. It's a simple function and what I need to change the text color when it shows Active eventStatus:

function() {
    var diff, status;
    diff = moment().diff(date, 'days')
    if (diff > 0) {
      status = 'Ended';
    }
    if (diff < 0) {
      status = 'Pending';
    }
    if (diff === 0) {

      status = 'Active';


        //status.style.color = "#132111"

        // document.getElementById('greenActive').style.color = "green"
    }
    return status;
  }

UPDATE HTML:

  <td id = "status-column"  >
      <span id="greenActive" >{{eventStatus}}</span>  
   </td>

I tried to use both 'status.style.color' and 'getElementById'. The result is that the data/text won't show up at all.

Anything I did wrong?

Thank you in advance for your help!

Answer 1

Edit:

Your code working but as I said, you need to make sure to execute the code after DOM loaded

 (function() { var diff, status; diff = 0 if (diff > 0) { status = 'Ended'; } if (diff < 0) { status = 'Pending'; } if (diff === 0) { status = 'Active'; document.getElementById('greenActive').style.color = "green" } return status; })(); 

  <td id = "status-column" > <span id="greenActive" >{{eventStatus}}</span> </td> 

You need to make sure that document loaded and DOM element you are trying to modify is available before calling you function. You can see a demo of js modifying text colour working here

Answer 2

function() {
var diff, status , statusColor = '';;
diff = moment().diff(date, 'days')
if (diff > 0) {
  status = 'Ended';
}
if (diff < 0) {
  status = 'Pending';
}
if (diff === 0) {

  status = 'Active';
  statusColor = '#5CB85C';


    //status.style.color = "#132111"

    // document.getElementById('greenActive').style.color = "green"
}
return <div style="background-color:'+statusColor+'">'+status+'</div>;

}

<td id = "status-column"  >
  <span id="greenActive" >{{eventStatus}}</span>