Is it possible to change background color of a webpage based on time?

Question

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
      if (hours > 12 && hours <= 15)
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    else
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  }
}
  function init1() {
    function setBackgroundForTimeOfDay() {
      const body = document.querySelector('body');
      const hours = new Date().getHours();

      if (9 <= hours && hours <= 12)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
        if (hours > 12 && hours <= 15)
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
      else
        ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

These are my codes. I programmed the java script to change back ground colour and nav bar selection colour based on user's time. But it does not work. Can you please help me with this? I am a total newbie.

`9 <= hour && hours <= 12` <-- You lack a `s` for `hours`, here. — Takit Isy, May 12 '18 at 16:28
Why do I see so much people NOT using the nice and useful [ Tidy ] button on their fiddles? (Just a remark out loud, don't take it badly. :)) — Takit Isy, May 12 '18 at 16:31
I am a complete newbie. I'm Really sorry for the inconvenience. — Jeeva Bharathi, May 12 '18 at 16:32
Are you calling the `init1` function? It also appears that `ul` is not defined. — 4castle, May 12 '18 at 16:34
I want the ul in nav bar section to be defined, how do I do that? I thought I could just use the same as body, so I duplicated the code. — Jeeva Bharathi, May 12 '18 at 16:36
Put an Id on the ul
. then fetch it by document.getElementById('nav_menu') — Rohit.007, May 12 '18 at 16:49

Takit Isy · Answer 1 · 2018-05-12T16:45:24.367

You must want to do the following with your conditions:

function init() {
  function setBackgroundForTimeOfDay() { 
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12) {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    } else if (hours > 12 && hours <= 15) {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    } else {
      body.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }
  }
}

function init1() {
  function setBackgroundForTimeOfDay() { // <-- Why do these functions have the same name
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (9 <= hours && hours <= 12) {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    } else if (hours > 12 && hours <= 15) {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    } else {
      ul.style['background-color'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    }
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

It's often better to use brackets for visibility, too.
(And to use [ Tidy ] buttons when available, as it will correctly indent your code automatically)

Documentation: https://www.w3schools.com/js/js_if_else.asp

Hope it helps.

The problem still persists, background colour does not change according to time. ;( — Jeeva Bharathi, May 12 '18 at 16:43
I'm working on it. I've added a comment in the code. Can you explain why the functions have the same name? — Takit Isy, May 12 '18 at 16:45
they both are there to set colours for nav bar and bg depending on time. Do they conflict with each other? since they are in separate functions, I assumed they do not conflict in any manner. so I left it that way. — Jeeva Bharathi, May 12 '18 at 17:13

Rohit.007 · Accepted Answer · 2018-05-12T19:24:21.377

I have made some changes in the script.

I have removed all your onload call from the dom (HTML) your HTML is loading prior than the javascript so that initially the functions are unavailable.
Added id="nav_menu" on the menu .

and change in the below code.

function init() {
  const body = document.querySelector('body');
  const hours = new Date().getHours();
  const ul = document.getElementById('nav_menu')

  if (9 <= hours && hours <= 12) {
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))';
    changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 231, 255),rgb(39, 38, 38))');
  } else if (hours > 12 && hours <= 15) {
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
    changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))');
  } else
    body.style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  changeMenuColor('linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))');
}

function changeMenuColor(color) {
  elements = document.getElementsByClassName('navbar-menu');
  for (var i = 0; i < elements.length; i++) {
    elements[i].querySelector('a').style['background-image'] = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 255, 207),rgb(39, 38, 38))';
  }
}

init();

Hope it helps!!!

https://jsfiddle.net/pqhuhfwx/7/ I updated the code. It still does not work. ;( — Jeeva Bharathi, May 12 '18 at 17:21
https://jsfiddle.net/pqhuhfwx/11/ check it out and do check all the HTML changes — Rohit.007, May 12 '18 at 19:23

Is it possible to change background color of a webpage based on time?

2 Answers2