Javascript if statements not working properly on html page

Question

I wrote a script a couple of days ago that would switch the css stylesheet for my page depending upon the time of day. It seemed to work fine until I realized that after it went through the script once, it would just stop.

For Example. When I first implemented the script, it would use one style sheet duing the day, then a different in the evening, then a 3rd one during sunset, and finally once at night. It would do this the first time around. But then after the 4th switch it won't switch again unless I re-implement the script. It just stays on the stylesheet that was switch to at the bottom of the script Since I'm new to javascript I have no clue why it's doing this.

I have used this same javascript function to control pictures and other things and they seem to work flawlessly. Here is the code.

<!--CSS Stylesheet Switch Code--->

<script type="text/JavaScript">
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (7 <= currentTime && currentTime < 17) {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/vice.css' type='text/css'>");
      }
      if (17 <= currentTime && currentTime < 19) {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/evening.css' type='text/css'>");
      }
      if (19 <= currentTime && currentTime < 21) {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/dusk.css' type='text/css'>");
      }
      else  {
       document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/nighttime.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

What do you mean by "after it went through the script once"? Are you talking about a single logged in user who refreshes the page every few minutes? Or does this work only for the first day after it's deployed? At the moment I can't imagine in what situations this should fail, since each time the page is loaded, the script should be evaluated completely distinct from previous attempts. More information on your tests would be helpful. — Andrzej Doyle
– Andrzej Doyle, Commented Mar 11, 2011 at 17:26
“unless I re-implement the script” — how do you mean “re-implement”? What do you do to get it working again? — Paul D. Waite
– Paul D. Waite, Commented Mar 11, 2011 at 17:28
Try to clear cache and then renew page. May be there are problems with cache — Anton
– Anton, Commented Mar 11, 2011 at 17:28
I'm sorry I didn't word this correctly. What i'm saying is that after the last stylesheet is switched to. the 'nighttime.css'. I never switches back and stays on that stylesheet. — Josh Tha CreativeOne
– Josh Tha CreativeOne, Commented Mar 11, 2011 at 17:36
By 're-implement' I simply mean, I take the javascript out and save the html file. Then I go back and paste the code back in and it works for some reason afterwards — Josh Tha CreativeOne
– Josh Tha CreativeOne, Commented Mar 11, 2011 at 17:36

Josh · Accepted Answer · 2011-03-11 17:26:13Z

6

Even if one of the first two statements are correct, one of the last two will always execute. Change your ifs to else ifs, or use a switch.

answered Mar 11, 2011 at 17:26

Josh

12.6k12 gold badges77 silver badges118 bronze badges

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

Comments

Piyush Mattoo · Accepted Answer · 2011-03-11 17:28:59Z

4

You should use Javascript If..Else If..If Statement like below:-

if (7 <= currentTime&&currentTime < 17) {
   document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/vice.css' type='text/css'>");
  }
  else if (17 <= currentTime&&currentTime < 19) {
   document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/evening.css' type='text/css'>");
  }
  else if (19 <= currentTime&&currentTime < 21) {
   document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/dusk.css' type='text/css'>");
  }
  else  {
   document.write("<link rel='stylesheet' href='http://itsnotch.com/tumblr/files/nighttime.css' type='text/css'>");
  }

answered Mar 11, 2011 at 17:28

Piyush Mattoo

16.2k6 gold badges50 silver badges56 bronze badges

Collectives™ on Stack Overflow

Javascript if statements not working properly on html page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest