trying to setInterval in JS to change zIndex of divs

Question

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!

UPDATED CODE: I tried to clean it up a bit (still learning how to streamline things, I may edit it even further) and I figured out the problem was I simply wasn't calling the function after declaring it. It now runs in my browser, but I have to refresh the page for it to work, I can't seem to get the setInterval() function to run.

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

const textMorning   = document.getElementById('text-box-morning');
const textLunch     = document.getElementById('text-box-lunch');
const textDinner    = document.getElementById('text-box-dinner');
const textEvening   = document.getElementById('text-box-evening');
const textBlank     = document.getElementById('text-box-blank');

const picMorning    = document.getElementById('pics-box-blank');
const picLunch      = document.getElementById('pics-box-blank');
const picDinner     = document.getElementById('pics-box-blank');
const picEvening    = document.getElementById('pics-box-blank');
const picBlank      = document.getElementById('pics-box-blank');

// 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 || hour === 7 || hour === 8) {
    textLunch.style.display = 'none';
    picLunch.style.display = 'none';
    textDinner.style.display = 'none';
    picDinner.style.display = 'none';
    textEvening.style.display = 'none';
    picEvening.style.display = 'none';
    textBlank.style.display = 'none';
    picBlank.style.display = 'none';
  } else if(hour === 11 || hour === 12 || hour === 13) {
    textMorning.style.display = 'none';
    picMorning.style.display = 'none';
    textDinner.style.display = 'none';
    picDinner.style.display = 'none';
    textEvening.style.display = 'none';
    picEvening.style.display = 'none';
    textBlank.style.display = 'none';
    picBlank.style.display = 'none';
  } else if(hour === 16 || hour === 17 || hour === 18) {
    textMorning.style.display = 'none';
    picMorning.style.display = 'none';
    textLunch.style.display = 'none';
    picLunch.style.display = 'none';
    textEvening.style.display = 'none';
    picEvening.style.display = 'none';
    textBlank.style.display = 'none';
    picBlank.style.display = 'none';
  } else if(hour === 19 || hour === 20) {
    textMorning.style.display = 'none';
    picMorning.style.display = 'none';
    textLunch.style.display = 'none';
    picLunch.style.display = 'none';
    textDinner.style.display = 'none';
    picDinner.style.display = 'none';
    textBlank.style.display = 'none';
    picBlank.style.display = 'none';
  }
  }
  setInterval(setRemindersBoxes(),1000);

Are you set on using z-index? Other attributes you could use to solve this are `display: none` or `opacity` — chase, Mar 18 '22 at 17:00
It should be `let hour = now.getHours();` not `let hour = now.getHours;` (Parens) -- That and adding a closing bracket to your function, which I'm assuming was lost during the copy & paste to StackOverflow, made it work properly in my codepen. — Steve, Mar 18 '22 at 17:02
I'm not necessarily stuck on z-index, just the first that came to mind. I'm actually considering changing it to display: none, as that should improve rendering, correct? Not that any of this is that complex, but the browser still renders the "hidden" divs if using z-index, but changing the display to none it will only render the div currently set to display? — emcee1342, Mar 21 '22 at 19:38

score 1 · Answer 1 · answered Mar 25 '22 at 15:08

1

Thanks to all that offered assistance! Adding the parens and fixing my setInterval callback per Ryan O'D's input has made my code work as expected.

answered Mar 25 '22 at 15:08

emcee1342

47
7

score 0 · Answer 2 · answered Mar 18 '22 at 17:15

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>

score 0 · Accepted Answer · edited Mar 18 '22 at 18:10

0

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.

edited Mar 18 '22 at 18:10

Dharman

30,962
25
85
135

answered Mar 18 '22 at 18:05

Ryan O'D

340
2
10

Thanks for all of the input, I corrected the parentheses and declaring those elements as constants, and I still can't get it to run. Not sure what the deal is. I put a console.log at the end of the script and it's not even showing up in the console, so it's like the script isn't being loaded by the page. Can't figure out why though. ** EDIT ** consoled outside of the setRemindersBoxes function and the console displayed it, but it won't if it's inside the function... – emcee1342 Mar 21 '22 at 19:21
Consider updating the code in the question so we can continue to assist. – Ryan O'D Mar 22 '22 at 22:31
Just edited my original post and added the new code, with comments, at the bottom. Thank you! – emcee1342 Mar 24 '22 at 16:39
You could also flip this around. Rather than having your conditional statements hide everything, set everything to `display: none` in your CSS file and then use your JavaScript to set specific divs to `display: block`. – Ryan O'D Mar 24 '22 at 16:57
When setting a callback with setInterval, you don't want invoke the function by having () on it. Rather, you want to set a pointer to the function. Essentially, you want setInterval(setRemindersBoxes, 1000). – Ryan O'D Mar 24 '22 at 17:04
Read about the differences between invoking a function and setting a pointer to a function here: https://stackoverflow.com/questions/30751892/difference-of-calling-a-function-with-and-without-parentheses-in-javascript – Ryan O'D Mar 24 '22 at 17:05

trying to setInterval in JS to change zIndex of divs

3 Answers3