CODEWITHSUNDEEP
javascripthtmlcss
Sabbir Ahmed
Sabbir Ahmed

Reputation: 21

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

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);

Upvotes: 1

Views: 137

Answers (7)

Ehsan
Ehsan

Reputation: 12959

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);

})();

Upvotes: 2

Pushpanshu Jain
Pushpanshu Jain

Reputation: 51

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>

Upvotes: 0

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

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);
}

Upvotes: 0

Sameer Dash
Sameer Dash

Reputation: 1

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'

Upvotes: 0

Sankeerth Mahurkar
Sankeerth Mahurkar

Reputation: 310

instead of that try this way.

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

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

Upvotes: 0

Lorenzo Borelli
Lorenzo Borelli

Reputation: 127

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

Upvotes: 0

Boo
Boo

Reputation: 189

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

Upvotes: 3

Related Questions