CODEWITHSUNDEEP
javascriptif-statementbackground-colorgetelementbyiddocument.write
Erikamyself
Erikamyself

Reputation: 263

Change Div Background-color based on time of the day

I am using the following script, but I would like to apply it only to the first section of my site and not to the body. (the following code it's working but it applies underneath my #top section).

<script type="text/javascript">
  var now = new Date();
  var hours = now.getHours();
  //Keep in code - Written by Computerhope.com
  //Place this script in your HTML heading section
  document.write('It\'s now: ', hours, '<br><br>');
  document.bgColor="#CC9900";
  //18-19 night
  if (hours > 17 && hours < 20){
   document.write ('<body style="background-color: orange">');
  }
  //20-21 night
  else if (hours > 19 && hours < 22){
   document.write ('<body style="background-color: orangered">');
  }
  //22-4 night
  else if (hours > 21 || hours < 5){
   document.write ('<body style="background-color: #C0C0C0;">');
  }
  //9-17 day
  else if (hours > 8 && hours < 18){
   document.write ('<body style="background-color: #616D7E">');
  }
  //7-8 day
  else if (hours > 6 && hours < 9){
   document.write ('<body style="background-color: skyblue">');
  }
  //5-6 day
  else if (hours > 4 && hours < 7){
   document.write ('<body style="background-color: steelblue">');
  }
  else {
   document.write ('<body style="background-color: white">');
  }
</script>

The HTML part:

<section class="full-height section-scroll" id="top">
  <div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
    <section class="intro-top">
      <h1>This is my H1</h1>
    </section>
</section>

And the CSS:

#top {
  height: 100vh;
  -webkit-transition: background-color 700ms linear;
     -moz-transition: background-color 700ms linear;
      -ms-transition: background-color 700ms linear;
       -o-transition: background-color 700ms linear;
          transition: background-color 700ms linear;
  background-color: rgba(253, 208, 7, 1);
  justify-content: center;
}

#top.scrolled {
  background-color: transparent
}

I have tried to change document.write ('<body style="background-color: orange">'); with document.getElementById("top").style.backgroundColor = "orange"; but still it doesn't work.

Upvotes: 0

Views: 1705

Answers (3)

Owl
Owl

Reputation: 6853

I can't comment on the post so i will just make it as an answer.

Are you putting the <script></script> on the top of the body / head? If so, move it to the bottom of your body / after the <div id="top">. Putting the script on head / top of the body won't work because the <script> is being executed before <div id="top"> is rendered.

Your code works fine for me, try this:

<html>
<head>
    <style>
        #top {
            height: 100vh;
            -webkit-transition: background-color 700ms linear;
            -moz-transition: background-color 700ms linear;
            -ms-transition: background-color 700ms linear;
            -o-transition: background-color 700ms linear;
            transition: background-color 700ms linear;
            background-color: rgba(253, 208, 7, 1);
            justify-content: center;
        }

        #top.scrolled {
            background-color: transparent
        }
    </style>
</head>

<body>
    <section class="full-height section-scroll" id="top">
        <div class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0s">
            <section class="intro-top">
                <h1>This is my H1</h1>
            </section>
    </section>

    <script type="text/javascript">
        var now = new Date();
        var hours = now.getHours();
        //Keep in code - Written by Computerhope.com
        //Place this script in your HTML heading section
        document.write('It\'s now: ', hours, '<br><br>');
        document.bgColor = "#CC9900";

        //hours = 4; Just for testing

        //18-19 night
        if (hours > 17 && hours < 20) {
            document.getElementById("top").style.backgroundColor = "orange"
        }
        //20-21 night
        else if (hours > 19 && hours < 22) {
            document.getElementById("top").style.backgroundColor = "red"
        }
        //22-4 night
        else if (hours > 21 || hours < 5) {
            document.getElementById("top").style.backgroundColor = "#C0C0C0";
        }
        //9-17 day
        else if (hours > 8 && hours < 18) {
            document.getElementById("top").style.backgroundColor = "#616D7E";
        }
        //7-8 day
        else if (hours > 6 && hours < 9) {
            document.getElementById("top").style.backgroundColor = "skyblue";
        }
        //5-6 day
        else if (hours > 4 && hours < 7) {
            document.getElementById("top").style.backgroundColor = "steelblue";
        } else {
            document.getElementById("top").style.backgroundColor = "white";
        }
    </script>
</body>

</html>

Upvotes: 2

doctorjay
doctorjay

Reputation: 91

try something like this in your CSS:

.red {background : red}
.orangered {background : orangered}

and this in your JavaScript:

if(hours 19 && hours < 22) {
 document.getElementById("top").className = 'orangered';
}

Upvotes: 0

Mosh Feu
Mosh Feu

Reputation: 29277

Instead of document.write you can declare a variable (color), set the color based on the time and set the body's color the result.

var now = new Date();
now.setHours(23);
var hours = now.getHours();
let color;
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br />');
document.bgColor="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
 color = "orange";
}
//20-21 night
else if (hours > 19 && hours < 22){
 color = "orangered";
}
//22-4 night
else if (hours > 21 || hours < 5){
 color = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18){
 color = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9){
 color = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7){
 color = "steelblue";
}
else {
 color = "white";
}

document.body.style.color = color

Or you can use a css variable

var now = new Date();
now.setHours(18);
var hours = now.getHours();
let color;
//Keep in code - Written by Computerhope.com
//Place this script in your HTML heading section
document.write('It\'s now: ', hours, '<br><br />');
document.bgColor="#CC9900";
//18-19 night
if (hours > 17 && hours < 20){
 color = "orange";
}
//20-21 night
else if (hours > 19 && hours < 22){
 color = "orangered";
}
//22-4 night
else if (hours > 21 || hours < 5){
 color = "#C0C0C0";
}
//9-17 day
else if (hours > 8 && hours < 18){
 color = "#616D7E";
}
//7-8 day
else if (hours > 6 && hours < 9){
 color = "skyblue";
}
//5-6 day
else if (hours > 4 && hours < 7){
 color = "steelblue";
}
else {
 color = "white";
}

document.body.style.setProperty('--color', color);
body {
  color: var(--color);
}

Upvotes: 1

Related Questions