I'm trying to change a CSS element with Javascript but it's not working

Question

So, I have tried changing the background color of my website using the javascript. I wanted it to change at certain time. But it doesn't seem working. I have run every set of combinations but the bg color always stays default one described in CSS.

The JS code seems to add new line of code instead of modifying the CSS. How do I know that which part of the code a computer will read first? Is the CSS prioritized first or the inline code/HTML ? TIA

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 = "White";

//5am-7am morning
if (hours > 5 && hours < 7) {
  document.write('<body style="background-color: #FFF95D">');
}
//7am-12pm noon
else if (hours > 7 && hours < 12) {
  document.write('<body style="background-color: #B3E5FC">');
}
//12pm-4pm afternoon
else if (hours > 12 && hours < 16) {
  document.write('<body style="background-color: #7E57C2">');
}
//4pm-7pm evening
else if (hours > 16 && hours < 19) {
  document.write('<body style="background-color: #EF5444">');
}
//7pm-10pm Night
else if (hours > 19 && hours < 22) {
  document.write('<body style="background-color: #424242">');
}
//1opm-5am Nighting
else if (hours > 22 && hours < 7) {
  document.write('<body style="background-color: #000000">');
}

  body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);

When I hard-code the hours, color looks to change fine for me. <body bgcolor="White" style="background-color: #B3E5FC"> — CertainPerformance
– CertainPerformance, Commented Jun 23, 2018 at 6:41

Boo · Accepted Answer · 2018-06-23 06:48:48Z

3

document.write() will basically add new lines code to the document which here is the html itself. The objective here is to change just the background-color property of body. You can use for example :

document.body.style.backgroundColor = "red";

answered Jun 23, 2018 at 6:48

Boo

1892 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ehsan · Accepted Answer · 2018-06-23 08:53:41Z

1) while you use document.write() an HTML document is fully loaded, will delete all existing HTML so use document.body.style.background for change color of body.

2) To change colors automatically use setInterval.

3) change last line from else if (hours > 22 && hours < 7) { to else { because there is not number greater than 22 and less than 7.

var el = document.getElementById('time');

(function(){
  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');
    //5am-7am morning
    if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; }
    //7am-12pm noon
    else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; }
    //12pm-4pm afternoon
    else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; }
    //4pm-7pm evening
    else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; }
    //7pm-10pm Night
    else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; }
    //1opm-5am Nighting
    else  { document.body.style.background = "#000000"; }
    },1000);
})();

var el = document.getElementById('time');

(function(){

  setInterval(function(){
	var now = new Date();
	var hours = now.getHours();
	el.innerHTML = ('It\'s now: ' + hours + '<br><br>');

	//5am-7am morning
	if (hours > 5 && hours <= 7) { document.body.style.background ='#FFF95D'; }
	//7am-12pm noon
	else if (hours > 7 && hours <= 12) { document.body.style.background ='#B3E5FC'; }
	//12pm-4pm afternoon
	else if (hours > 12 && hours <= 16) { document.body.style.background = "#7E57C2"; }
	//4pm-7pm evening
	else if (hours > 16 && hours <= 19) { document.body.style.background = "#EF5444"; }
	//7pm-10pm Night
	else if (hours > 19 && hours <= 22) { document.body.style.background = "#424242"; }
	//1opm-5am Nighting
	else { document.body.style.background = "#000000"; }

	},1000);
  
})();

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);
}

<span id="time"></span>

You can use of switch instead of else if like this:

var el = document.getElementById('time');

(function(){

  setInterval(function(){
    var now = new Date();
    var hours = now.getHours();
    el.innerHTML = ('It\'s now: ' + hours + '<br><br>');

    switch(true) {
        case (hours > 5 && hours <= 7):
          document.body.style.background ='#FFF95D';
          break;
        case (hours > 7 && hours <= 12):
          document.body.style.background ='#B3E5FC';
          break;
        case (hours > 12 && hours <= 16):
          document.body.style.background = "#7E57C2";
          break;
        case (hours > 16 && hours <= 19):
          document.body.style.background = "#EF5444";
          break;
        case (hours > 19 && hours <= 22):
          document.body.style.background = "#424242";
          break;
        default:
          document.body.style.background = "#000000";
      }

    },1000);

})();

You should really be using a switch statement for this instead of all the if else's

Lorenzo Borelli · Accepted Answer · 2018-06-23 06:50:05Z

0

You should use this instead of document.write:

document.body.style.backgroundColor = "some_color";

where some_color is one of the colors of your choice

answered Jun 23, 2018 at 6:50

Lorenzo Borelli

1273 silver badges11 bronze badges

Comments

Papershine · Accepted Answer · 2018-06-23 06:52:30Z

0

instead of that try this way.

In javascript : Instead of document.write() do this

document.body.style.backgroundColor="#xxxxxx"

edited Jun 23, 2018 at 6:52

Papershine

5,2332 gold badges27 silver badges48 bronze badges

answered Jun 23, 2018 at 6:48

Sankeerth Mahurkar

3102 silver badges14 bronze badges

Comments

Sameer Dash · Accepted Answer · 2018-06-23 06:53:03Z

0

Use the !important attribute when you give the style in the javascript to override the previously specified backgound color. Example: style='background-color: #fff !important'

answered Jun 23, 2018 at 6:53

Sameer Dash

1

Comments

Jagjeet Singh · Accepted Answer · 2018-06-23 07:06:41Z

If you just want to change the color of body then use document.body.style.backgroundColor or document.bgColor

document.bgColor gets or sets the background color of the current document.

The write() method writes HTML expressions or JavaScript code to a document.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

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 = 'white';

//5am-7am morning
if (hours > 5 && hours < 7) {
 document.body.style.backgroundColor = '#FFF95D';
}
//7am-12pm noon
else if (hours > 7 && hours < 12) {
  document.body.style.backgroundColor = '#B3E5FC';  
}
//12pm-4pm afternoon
else if (hours > 12 && hours < 16) {
  document.body.style.backgroundColor = '#7E57C2';
}
//4pm-7pm evening
else if (hours > 16 && hours < 19) {
  document.body.style.backgroundColor = '#EF5444';
}
//7pm-10pm Night
else if (hours > 19 && hours < 22) {
  document.body.style.backgroundColor = '#424242';
}
//1opm-5am Nighting
else if (hours > 22 && hours < 7) {
  document.body.style.backgroundColor = '#000000';
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: #455A64;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  line-height: var(--lineHeightMd);
}

Pushpanshu Jain · Accepted Answer · 2018-06-23 08:32:32Z

0

You are trying to run this code at its boundary time. e.g at 12 o'clock it is not satisfying in either condition i.e.(hours<12)and (hours>12) so put "<=" instead of <

Try out this code :

 <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 = "White";

        //5am-7am morning
        if (hours > 5 && hours <= 7) {
          document.write('<body style="background-color: #FFF95D">');
        }
        //7am-12pm noon
        else if (hours > 7 && hours <= 12) {
          document.write('<body style="background-color: #B3E5FC">');
        }
        //12pm-4pm afternoon
        else if (hours > 12 && hours <= 16) {
          document.write('<body style="background-color: #7E57C2">');
        }
        //4pm-7pm evening
        else if (hours > 16 && hours <= 19) {
          document.write('<body style="background-color: #EF5444">');
        }
        //7pm-10pm Night
        else if (hours > 19 && hours <= 22) {
          document.write('<body style="background-color: #424242">');
        }
        //1opm-5am Nighting
        else if (hours > 22) {
          document.write('<body style="background-color: #000000">');
        }
        </script>

edited Jun 23, 2018 at 8:32

answered Jun 23, 2018 at 7:14

Pushpanshu Jain

511 silver badge3 bronze badges

1 Comment

rst-2cv Over a year ago

You should explain why/how this works as a solution, otherwise it provides little value.

Collectives™ on Stack Overflow

I'm trying to change a CSS element with Javascript but it's not working

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related