trying to setInterval in JS to change zIndex of divs-CodePudding

First off, I am a brand new coder. I have some very, very limited experience with HTML and CSS, but this is literally my first delve into any programming languages. I'm trying to make a display board and, in this particular section, I have several divs set position:absolute, stacked directly over top each other, and I want to bring each of them to the top at specific times of the day. Here's what I've got so far:

function setRemindersBoxes() {
  let now = new Date();
  let hour = now.getHours;

  // sets the Z-Index of the reminders text and pic boxes to display the appropriate one, need to find out if it's possible to check against multiple values in a single comparison

  // text boxes
  if (hour == 6) {
    document.getElementById('text-box-morning').style.zIndex = "1";
    document.getElementById('text-box-lunch').style.zIndex = "0";
    document.getElementById('text-box-dinner').style.zIndex = "0";
    document.getElementById('text-box-evening').style.zIndex = "0";
    document.getElementById('text-box-blank').style.zIndex = "0";
  } else if (hour == 11) {
    document.getElementById('text-box-morning').style.zIndex = "0";
    document.getElementById('text-box-lunch').style.zIndex = "1";
    document.getElementById('text-box-dinner').style.zIndex = "0";
    document.getElementById('text-box-evening').style.zIndex = "0";
    document.getElementById('text-box-blank').style.zIndex = "0";
  } else if (hour == 5) {
    document.getElementById('text-box-morning').style.zIndex = "0";
    document.getElementById('text-box-lunch').style.zIndex = "0";
    document.getElementById('text-box-dinner').style.zIndex = "1";
    document.getElementById('text-box-evening').style.zIndex = "0";
    document.getElementById('text-box-blank').style.zIndex = "0";
  } else if (hour == 7) {
    document.getElementById('text-box-morning').style.zIndex = "0";
    document.getElementById('text-box-lunch').style.zIndex = "0";
    document.getElementById('text-box-dinner').style.zIndex = "0";
    document.getElementById('text-box-evening').style.zIndex = "1";
    document.getElementById('text-box-blank').style.zIndex = "0";
  } else {
    document.getElementById('text-box-morning').style.zIndex = "0";
    document.getElementById('text-box-lunch').style.zIndex = "0";
    document.getElementById('text-box-dinner').style.zIndex = "0";
    document.getElementById('text-box-evening').style.zIndex = "0";
    document.getElementById('text-box-blank').style.zIndex = "1";
  }
}

setInterval(setRemindersBoxes, 1000);

#text-box-blank,
#text-box-morning,
#text-box-lunch,
#text-box-dinner,
#text-box-evening {
  background-color: black;
  position: absolute;
  height: 100%;
  width: 100%;
}

<div id="reminders-text-container">
  <div id="text-box-blank">
    <p>Nothing at this time!</p>
  </div>
  <div id="text-box-morning">
    <p>Good morning!</p>
  </div>
  <div id="text-box-lunch">
    <p>Good afternoon!</p>
  </div>
  <div id="text-box-dinner">
    <p>Dinner time!</p>
  </div>
  <div id="text-box-evening">
    <p>Good evening!</p>
  </div>
</div>

It doesn't appear to be setting the zIndex as I expected, and I don't see the Interval running on the div when I inspect the code in Chrome.

Could someone offer some pointers here? Thank you!

CodePudding user response：

Your function is not enclosed in parentheses and the error is in the clock detection example. let hour = now.getHours; correctly let hour = now.getHours();

function setRemindersBoxes () {
  let now     = new Date();
  let hour    = now.getHours();
  
  console.log('hour:', hour, 'old hour:',now.getHours);

  // sets the Z-Index of the reminders text and pic boxes to display the appropriate one, need to find out if it's possible to check against multiple values in a single comparison

  // text boxes
  if(hour == 6) {
      document.getElementById('text-box-morning').style.zIndex = "1";
      document.getElementById('text-box-lunch').style.zIndex = "0";
      document.getElementById('text-box-dinner').style.zIndex = "0";
      document.getElementById('text-box-evening').style.zIndex = "0";
      document.getElementById('text-box-blank').style.zIndex = "0";
  } else if(hour == 11) {
      document.getElementById('text-box-morning').style.zIndex = "0";
      document.getElementById('text-box-lunch').style.zIndex = "1";
      document.getElementById('text-box-dinner').style.zIndex = "0";
      document.getElementById('text-box-evening').style.zIndex = "0";
      document.getElementById('text-box-blank').style.zIndex = "0";
  } else if(hour == 5) {
      document.getElementById('text-box-morning').style.zIndex = "0";
      document.getElementById('text-box-lunch').style.zIndex = "0";
      document.getElementById('text-box-dinner').style.zIndex = "1";
      document.getElementById('text-box-evening').style.zIndex = "0";
      document.getElementById('text-box-blank').style.zIndex = "0";
  } else if(hour == 7) {
      document.getElementById('text-box-morning').style.zIndex = "0";
      document.getElementById('text-box-lunch').style.zIndex = "0";
      document.getElementById('text-box-dinner').style.zIndex = "0";
      document.getElementById('text-box-evening').style.zIndex = "1";
      document.getElementById('text-box-blank').style.zIndex = "0";
  } else {
      document.getElementById('text-box-morning').style.zIndex = "0";
      document.getElementById('text-box-lunch').style.zIndex = "0";
      document.getElementById('text-box-dinner').style.zIndex = "0";
      document.getElementById('text-box-evening').style.zIndex = "0";
      document.getElementById('text-box-blank').style.zIndex = "1";
  }
}

setInterval(setRemindersBoxes, 1000);

#text-box-blank, #text-box-morning, #text-box-lunch, #text-box-dinner, #text-box-evening {
background-color: silver;
position: absolute;
height: 100%;
width: 100%;

<div id="reminders-text-container">
    <div id="text-box-blank">
        <p>Nothing at this time!</p>
    </div>
    <div id="text-box-morning">
        <p>Good morning!</p>
    </div>
    <div id="text-box-lunch">
        <p>Good afternoon!</p>
    </div>
    <div id="text-box-dinner">
        <p>Dinner time!</p>
    </div>
    <div id="text-box-evening">
        <p>Good evening!</p>
    </div>
</div>

CodePudding user response：

Regarding the missing () on getHours, take a look at this thread.

Also, set your text color to white (it is black by default...the same as your background color).

As @chase mentioned above, here is your chance to learn about the CSS display property.

Alternatively, go watch some CSS display tutorial videos.

Additionally, you can reduce the number of times you "get" elements from the document by getting everything once at the beginning of your JS. Consider this...

const morning = document.getElementById('text-box-morning');
const lunch = document.getElementById('text-box-lunch');
const dinner = document.getElementById('text-box-dinner');
const evening = document.getElementById('text-box-evening');
const blank = document.getElementById('text-box-blank');

Finally, take a few minutes to understand DRY. You should see how it applies to your JavaScript.