Change Certain Font Color Based Calculated Hours - Javascript

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,

Solution 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 redelseif (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 blueelse{
  row.style.color = "blue";
}

Solution 2:

Try

const table = document.querySelector(`#tableRow`)

// ------------------------------------------ Duration// calculating the amount of time a vehicle was parkedlet row = document.querySelector("#pricerow");
    let duration = ((Math.abs(dateIn - outDate))/3600000).toFixed(2)
    // if more than 1 hr, calculate the pricevar price = 0if (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 redelseif (duration > 23) {
  // change the font color to redvar price = row.style.color = "red";

} // if the vehicle was parked for less than 1 hr, change the font color to blueelse{
  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)