js code optimization for calling stylesheets dependent on end users' time

Question

the following code works. it's simple but i'm sure there will be a better and/or more optimal way to write it without using jquery but i don't know of any other way to do it and keep it working as it does now.

<script>
function getStylesheet() {
    var currentTime = new Date().getHours();
    if (5 <= currentTime&&currentTime < 11) {
        document.write("<link rel='stylesheet' href='{T_THEME_PATH}/morning.css'>");
    }
    if (11 <= currentTime&&currentTime < 16) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/day.css'>");
    }
    if (16 <= currentTime&&currentTime < 22) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/evening.css'>");
    }
    if (22 <= currentTime&&currentTime <= 24 || 0 <= currentTime&&currentTime < 5) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/night.css'>");
    }
}

getStylesheet();

edit: i'm just needing to know if there is a better way to write the js i posted. better as in what flaws or incorrect coding i have

Answer 1

Your approach is mostly fine for what you're doing, although the main issue is the use of document.write which is generally considered to be bad practice when inserting elements. If you wanted to clean things up a bit you could do something like this, which focuses on the breakpoints rather than ranges of values:

function getStylesheet() {
  const currentTime = new Date().getHours();
  const breaks = [5, 11, 16, 22, 24];
  const extensions = ['night', 'morning', 'afternoon', 'evening', 'night'];
  const match = breaks.findIndex(num => currentTime < num);

  const head = document.getElementsByTagName('head')[0];
  const sheetLink = document.createElement('link');
  sheetLink.rel = 'stylesheet';
  sheetLink.href = `T_THEME_PATH/${extensions[match]}.css`;

  head.appendChild(sheetLink);
}

getStylesheet();

This approach assumes that the time format will always 0-24, and requires the two arrays to be exactly related, so it's not that flexible but you might like to use it. It also uses a template literal to construct the href once rather than writing it out multiple times.

One final note - there was no jQuery in your code, it's all vanilla javascript.