www.webdeveloper.com
Results 1 to 8 of 8

Thread: seasonal JavaScript not working

  1. #1
    Join Date
    Aug 2013
    Posts
    3

    Question seasonal JavaScript not working

    Hi there,

    I had already asked on the other forum but still don't know where is a problem.
    could anybody check why this script is not working please?
    I tried almost everything... It should load season.js only on days between Jun and March.
    Code:
    <script>
    function load_script(url) {
       var e = document.createElement("script");
       e.src = url;
       e.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(e);
    }
    
    window.onload = function( ) {
    	var date = new Date;
    	var month = date.getMonth( ) + 1;
    
    	if ((6 <= month) || (3 >= month)) {
    		load_script("season.js");
    	}
    }
    
    </script>
    Many thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    Quote Originally Posted by ren7o View Post
    Hi there,

    I had already asked on the other forum but still don't know where is a problem.
    could anybody check why this script is not working please?
    I tried almost everything... It should load season.js only on days between Jun and March.
    Code:
    <script>
    function load_script(url) {
       var e = document.createElement("script");
       e.src = url;
       e.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(e);
    }
    
    window.onload = function( ) {
    	var date = new Date;
    	var month = date.getMonth( ) + 1;
    
    	if ((6 <= month) || (3 >= month)) {
    		load_script("season.js");
    	}
    }
    
    </script>
    Many thanks!
    It's the logic of your if statement.
    Keep in mind that the .getMonth() function will return a value of 0 (Jan) ... 11 (Dec) depending on current month of the new Date(), which, by the way is not formed correctly.
    You then add 1 to the month to create the range 1 (Jan) ... 12 (Dec), which is acceptable.

    But, by your logic if the current month is less than or equal to 6 (June) OR greater than or equal to 3 (March) the load_script will occur. But this covers all months of the year!!
    Why, because less than 6 is also less than 3 , therefore the logic is true.
    And, because greater than 3 is also greater than 6, therefore the logic is true.
    Your test is if ((true) || (true)) { load... } will always be true.

    Your logic should be for INCLUSIVE April thru June

    Code:
    <script>
    function load_script(url) {
       var e = document.createElement("script");
       e.src = url;
       e.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(e);
    }
    
    window.onload = function( ) {
    	var date = new Date();
    	var month = date.getMonth( ) + 1;
    
    	if ((6 <= month) && (3 >= month)) {  // these are month (inclusive) of April thru July.
    		load_script("season.js");
    	}
    }
    
    </script>
    If you really want March thru June (inclusive) in the same year, you test logic could also be:
    Code:
      if (( month >= 3) // greater than or equal to March
       && (month <= 6)) // less than or equal to June
      { load_script("season.js"); }
    If the season is as you specify from June (of one year) to March of the next year)
    your logic would need to be changed again.

  3. #3
    Join Date
    Aug 2013
    Posts
    3
    Wow! Thank you JMRKER for that answer. So If I want to run that script from October of one year
    to March of the next year I cant use this ((11 <= month) || (3 >= month)) ??

    Have a nice day! )

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    I don't really see a need to worry about one year to the next unless you have some special need not specified yet.

    Study this code to see how selection of a particular month will highlight the season of the year.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     #wrapper { width:350px; }
     .season {
        border: thick solid transparent;
        background-Color: transparent;
     }
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <div id="wrapper">
    Select month of year to highlight season:<br>
    <label><input type="radio" name="monBtn" value="0"> Jan </label>
    <label><input type="radio" name="monBtn" value="1"> Feb </label>
    <label><input type="radio" name="monBtn" value="2"> Mar </label>
    <label><input type="radio" name="monBtn" value="3"> Apr </label>
    <label><input type="radio" name="monBtn" value="4"> May </label>
    <label><input type="radio" name="monBtn" value="5"> Jun </label><br>
    <label><input type="radio" name="monBtn" value="6"> Jul </label>
    <label><input type="radio" name="monBtn" value="7"> Aug </label>
    <label><input type="radio" name="monBtn" value="8"> Sep </label>
    <label><input type="radio" name="monBtn" value="9"> Oct </label>
    <label><input type="radio" name="monBtn" value="10"> Nov </label>
    <label><input type="radio" name="monBtn" value="11"> Dec </label>
    <p>
    
    <dl id="Spring" class="season">
     <dt>Spring</dt>
     <dd>March</dd>
     <dd>April</dd>
     <dd>May</dd>
    </dl>
    <dl id="Summer" class="season">
     <dt>Summer</dt>
     <dd>June</dd>
     <dd>July</dd>
     <dd>August</dd>
    </dl>
    <dl id="Autumn" class="season">
     <dt>Autumn</dt>
     <dd>September</dd>
     <dd>October</dd>
     <dd>November</dd>
    </dl>
    <dl id="Winter" class="season">
     <dt>Winter</dt>
     <dd>December</dd>
     <dd>January</dd>
     <dd>February</dd>
    </dl>
    </div> 
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?282771-seasonal-JavaScript-not-working
    
    var Seasons = ['Spring','Summer','Autumn','Winter'];
    function changeSeason(cmon) {
      var season = 0;
      if ((cmon >= 2) && (cmon <= 4)) { season = 0; }
      if ((cmon >= 5) && (cmon <= 7)) { season = 1; }
      if ((cmon >= 8) && (cmon <= 10)) { season = 2; }
      if ((cmon >= 11) || (cmon <= 1)) { season = 3; }
      for (var i=0; i<Seasons.length; i++) {
        document.getElementById(Seasons[i]).style.borderColor = 'transparent';
        document.getElementById(Seasons[i]).style.backgroundColor = 'transparent';
      }
      document.getElementById(Seasons[season]).style.borderColor = 'red';
      document.getElementById(Seasons[season]).style.backgroundColor = 'pink';
    }
    window.onload = function() {
      var sel = document.getElementById('wrapper').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        sel[i].onclick = function() { changeSeason(this.value); }
      }
      var now = new Date();
      cmon = now.getMonth();
      changeSeason(cmon);
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Here is another version of the last post that adds a drop-down for the month selection.
    I don't see any reason you would need both selection methods, but just something to think about.
    The default display is the season of the current month as seen in the onload section.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css">
     #wrapper { width:350px; }
     .season {
        border: thick solid transparent;
        background-Color: transparent;
     }
    </style>
    
    <title> Untitled </title>
    
    </head>
    <body>
    <div id="wrapper">
    Select month of year to highlight season: 
    <select id="selectMonth" onchange="changeSeason(this.value)">
     <option value="0"> January </option>
     <option value="1"> February </option>
     <option value="2"> March </option>
     <option value="3"> April </option>
     <option value="4"> May </option>
     <option value="5"> June </option>
     <option value="6"> July </option>
     <option value="7"> August </option>
     <option value="8"> September </option>
     <option value="9"> October </option>
     <option value="10"> November </option>
     <option value="11"> December </option>
    </select> <br>
    <label><input type="radio" name="monBtn" value="0"> Jan </label>
    <label><input type="radio" name="monBtn" value="1"> Feb </label>
    <label><input type="radio" name="monBtn" value="2"> Mar </label>
    <label><input type="radio" name="monBtn" value="3"> Apr </label>
    <label><input type="radio" name="monBtn" value="4"> May </label>
    <label><input type="radio" name="monBtn" value="5"> Jun </label><br>
    <label><input type="radio" name="monBtn" value="6"> Jul </label>
    <label><input type="radio" name="monBtn" value="7"> Aug </label>
    <label><input type="radio" name="monBtn" value="8"> Sep </label>
    <label><input type="radio" name="monBtn" value="9"> Oct </label>
    <label><input type="radio" name="monBtn" value="10"> Nov </label>
    <label><input type="radio" name="monBtn" value="11"> Dec </label>
    <p>
    
    <dl id="Spring" class="season">
     <dt>Spring</dt> <dd>March</dd> <dd>April</dd> <dd>May</dd>
    </dl>
    <dl id="Summer" class="season">
     <dt>Summer</dt> <dd>June</dd> <dd>July</dd> <dd>August</dd>
    </dl>
    <dl id="Autumn" class="season">
     <dt>Autumn</dt> <dd>September</dd> <dd>October</dd> <dd>November</dd>
    </dl>
    <dl id="Winter" class="season">
     <dt>Winter</dt> <dd>December</dd> <dd>January</dd> <dd>February</dd>
    </dl>
    </div> 
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?282771-seasonal-JavaScript-not-working
    
    var Seasons = ['Spring','Summer','Autumn','Winter'];
    function changeSeason(cmon) {
      var season = 0;
      switch (Number(cmon)) {
        case 2: case 3: case 4: season = 0; break;
        case 5: case 6: case 7: season = 1; break;
        case 8: case 9: case 10: season = 2; break;
        case 11: case 0: case 1: season = 3; break;
      }
      for (var i=0; i<Seasons.length; i++) {
        document.getElementById(Seasons[i]).style.borderColor = 'transparent';
        document.getElementById(Seasons[i]).style.backgroundColor = 'transparent';
      }
      document.getElementById(Seasons[season]).style.borderColor = 'red';
      document.getElementById(Seasons[season]).style.backgroundColor = 'pink';
    }
    window.onload = function() {
      var sel = document.getElementById('wrapper').getElementsByTagName('input');
      for (var i=0; i<sel.length; i++) {
        sel[i].onclick = function() { changeSeason(this.value); }
      }
      var now = new Date();
      cmon = now.getMonth();
      sel[cmon].checked = true;
      document.getElementById('selectMonth').selectedIndex = cmon;
      changeSeason(cmon);
    }
    </script>
    
    </body>
    </html>

  6. #6
    Join Date
    Aug 2013
    Posts
    3
    Excellent many thanx to you JMRKER!
    Will try to study that code.

    Have a nice day!

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    You're most welcome.
    Happy to help.
    Good luck!

  8. #8
    Join Date
    Oct 2013
    Posts
    2
    Aah, yes, it works now. Should have seen that one myself. Tested by changing the clock on my computer.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles