Change certain font color based calculated hours - JavaScript

Question

I'm working on calculating parking tickets based on the time it entered and the time it exited. I am stuck on changing the color setting. So if the vehicle stays parked > 23 hr, the font color will change to 'red', and if the vehicle stays parked < 1 hr, the font color will change to 'blue'.

I tried to add comments on every step and my approach.

    let row = document.querySelector("#pricerow");

    if (duration > 1) {
      var price = (duration * 2.99).toFixed(2);

    } // if it's more than 23 hrs, change the font color to red
    else if (duration > 23) {
      // change the font color to red
      var price = row.style.color = "red";

    } // if the vehicle was parked for less than 1 hr, change the font color to blue
    else{
      var price = 0;
      row.style.color = "blue";
      // price.style.fontcolor = 'blue'    // not working
      // price.fontcolor("blue");
    }

    tb.innerHTML += `<tr>
                              <td>${car.license}</td>
                              <td id='pricerow'>${price}</td>
                              <td>${duration}</td>
                              <td>${timeIn}</td>
                              <td>${timeOut}</td>
                            </tr>`

  });

}

Answer 1

Just set the CSS color property using .style.color .

var row = document.querySelector("#pricerow");
if (duration > 1) {

} // if it's more than 23 hrs, change the font color to red
else if (duration > 23) {
  // change the font color to red
  row.style.color = "red";
} // if the vehicle was parked for less than 1 hr, change the font color to blue
else{
  row.style.color = "blue";
}

Answer 2

Try

 const table = document.querySelector(`#tableRow`) // ------------------------------------------ Duration // calculating the amount of time a vehicle was parked let row = document.querySelector("#pricerow"); let duration = ((Math.abs(dateIn - outDate))/3600000).toFixed(2) // if more than 1 hr, calculate the price var price = 0 if (duration > 1) { price = (duration * 2.99).toFixed(2); } // if it's more than 23 hrs, change the font color to red table.innerHTML += `<tr> <td>${car.license}</td> <td style="color: ${(duration < 1)? 'blue': ((duration > 23)? 'red': 'black')}" id='pricerow'>${price}</td> <td>${duration}</td> <td>${timeIn}</td> <td>${timeOut}</td> </tr>` // table.innerHTML += row }); }

Comments:

Your code has some logic errors (which I removed in my answer) on this line for example:

if (duration > 1) {
  var price = (duration * 2.99).toFixed(2);

} // if it's more than 23 hrs, change the font color to red
else if (duration > 23) {
  // change the font color to red
  var price = row.style.color = "red";

} // if the vehicle was parked for less than 1 hr, change the font color to blue
else{
  var price = 0;
  row.style.color = "blue";
  // price.style.fontcolor = 'blue'    // not working
  // price.fontcolor("blue");
}

Note that you have, if(duration> 1) and else if(duration> 23) , the else if(duration> 23) will never be executed, because if duration is greater than 23 it will already be greater than 1 too, so executed only what is inside if(duration > 1)