Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Javascript problem

  1. Mar 7, 2013 #1
    Hello!
    I am a newbie in javascript programming. I am trying to write a program where there will be 2 drop-down menu, one for month and another for days. There will be no content in the day 'select' tag at first but when a month will be selected from the month drop-down box, day drop-down will show the exact number of days for that month i.e., January = 31, February = 28, April = 30 etc.

    This the code I wrote but I can't figure out where I am making the mistake. Please help me improve my basic in JavaScript. I'll appreciate all your help. Thank you.

    <!DOCTYPE html>
    <html>
    <body>

    <script type="text/javascript">

    function writeMonthOptions(){
    var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var monthCounter;

    for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
    document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
    }

    function writeDayOptions(){
    var mC=monthChosen.options[monthChosen.selectedIndex].value;
    var dayCounter;
    var daysNum = new Array;

    if(mC==2){
    for(dayCounter=1; dayCounter<=29; dayCounter++){
    daysNum[dayCounter-1]=dayCounter;
    }
    }
    else if(mC==4 || mC==6 || mC==9 || mC==11){
    for(dayCounter=1; dayCounter<=30; dayCounter++){
    daysNum[dayCounter-1]=dayCounter;
    }
    }
    else{
    for(dayCounter=1; dayCounter<=31; dayCounter++){
    daysNum[dayCounter-1]=dayCounter;
    }
    }
    writeDay(daysNum);

    }

    funtion writeDay(days){
    var i=0;
    while(days){
    document.write('<OPTION value=' + days + '>' + days);
    }
    }



    </script>

    <select id="monthChosen" onChange="writeDayOptions()">
    <option>Month</option>
    <script language=JavaScript>
    writeMonthOptions();
    </script>
    </select>

    <select id="dayChosen">
    <option>Day</option>
    <script language=JavaScript>
    writeDay();
    </script>
    </select>



    </body>
    </html>
     
    Last edited: Mar 7, 2013
  2. jcsd
  3. Mar 7, 2013 #2

    Mark44

    Staff: Mentor

    When you include code in a post, put a [ code ] tag at the top and a [ /code ] tag at the bottom (without the spaces). I have done this, below.
    You have several problems that I see.
    1) "funtion" is incorrect in your definiton of the writeDay function.
    2) In the script block at the end of your code, you call writeDay with no arguments. As you defined writeDay, it takes a parameter, presumably an array of numbers.
    3) Your implementation of writeDay has an infinite loop.
    Code (Text):
    while(days){
       document.write('<OPTION value=' + days[i] + '>' + days[i]);
    }
    This loop runs forever, and continually prints the same string over and over, forever.

    You need some way for the loop to stop - I would suggest a for loop that you control by the size of the array, days.
     
  4. Mar 7, 2013 #3

    Mark44

    Staff: Mentor

    Also, your loop in writeDay isn't writing the values in the array in the right place. You want to put them in your dayChosen select element, but they are instead just being written on the page and are overwriting your two select elements.
     
  5. Mar 8, 2013 #4
    Thanks a lot, Mark44. I tried to fix the problems you pointed out. I have tried to use GLOBAL variable this time and made 'daysNum' variable a GLOBAL one. But there's no result. I applied the similar sort of code for the 'month drop-down', then why isn't it working for 'day drop-down'? Is there any way to transfer javascript content to a specific place of html code?
    Thank you very much for your help once again.

    Code (Text):
    <!DOCTYPE html>
    <html>
    <body>

    <script  type="text/javascript">

    var daysNum=new Array;

    if(a==23 && b==1)
        document.write("My birthday");

    function writeMonthOptions(){
        var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        var monthCounter;
       
        for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
            document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
    }

    function writeDayOptions(){
    var mC=monthChosen.options[monthChosen.selectedIndex].value;
    var dayCounter;

        if(mC==2){
            for(dayCounter=1; dayCounter<=29; dayCounter++){
                daysNum[dayCounter-1]=dayCounter;
            }
        }
        else if(mC==4 || mC==6 || mC==9 || mC==11){
            for(dayCounter=1; dayCounter<=30; dayCounter++){
                daysNum[dayCounter-1]=dayCounter;
            }
        }
        else{
            for(dayCounter=1; dayCounter<=31; dayCounter++){
                daysNum[dayCounter-1]=dayCounter;
            }
        }

    }

    function writeDay(){
    var i;
        for(i=0; i<daysNum.length; i++){
        document.write('<OPTION value=' + daysNum[i] + '>' + daysNum[i]);
        }
    }
               


    </script>

    <select id="monthChosen" onChange="writeDayOptions()">
    <option>Month</option>
    <script language=JavaScript>
    writeMonthOptions();
    </script>
    </select>

    <select id="dayChosen">
    <option>Day</option>
    <script language=JavaScript>
    writeDay();
    </script>
    </select>



    </body>
    </html>
     
    Last edited: Mar 8, 2013
  6. Mar 8, 2013 #5

    Mark44

    Staff: Mentor

    I played around with your code, and was able to get something that works.

    This code will correctly write option nodes into the select list. If you run it more than once, it continues to add dates into the select list, so you should add logic so that on the second and subsequent runs, any day number options get removed before new options are added. That's what the boolean variable firstRun is intended for.

    I deleted your writeDay function, and merged its actions into writeDayOptions.

    While I was putting this together I was using the debugging tools that are present in most browsers (press F12 in the browser to open the tools up). The debugger will automatically stop at any line that starts with debugger;

    w3schools has a lot of tutorials on web programming. I found this page that deals with adding options to a select object in HTML - http://www.w3schools.com/jsref/met_select_add.asp

    I'm sure there's another page on how to delete options.

    Code (Text):

    <!DOCTYPE html>
    <html>
    <body>

    <script  type="text/javascript">

    var daysNum=new Array();
    var firstRun = false;  // Not currently used


    function writeMonthOptions(){
        var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",

    "Dec");
        var monthCounter;
       
        for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
            document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
    }

    function writeDayOptions(){

      var mC=monthChosen.options[monthChosen.selectedIndex].value;
      var dayCounter;
      var i;
    debugger;

      if(mC==2){
        for(dayCounter=1; dayCounter<=29; dayCounter++){
          daysNum[dayCounter-1]=dayCounter;
        }
      }
      else if(mC==4 || mC==6 || mC==9 || mC==11){
        for(dayCounter=1; dayCounter<=30; dayCounter++){
          daysNum[dayCounter-1]=dayCounter;
        }
      }
      else{
        for(dayCounter=1; dayCounter<=31; dayCounter++){
          daysNum[dayCounter-1]=dayCounter;
        }
      }
      //writeDay();
      var x = document.getElementById("dayChosen");
      for(i=1; i<= daysNum.length; i++){
         var option = document.createElement("option");
         option.text = i
         x.add(option, null);
      }
    }

    </script>

    <select id="monthChosen" onChange="writeDayOptions()">
    <option>Month</option>
    <script language=JavaScript>
    writeMonthOptions();
    </script>
    </select>

    <select id="dayChosen">
    <option>Day</option>
    </select>

    </body>
    </html>
     
     
  7. Mar 10, 2013 #6
    Finally got it in correct shape. :biggrin:
    Thank you so much, Mark44 !! I can't tell you how much I appreciate your help. Thanks a lot!
    here's the code -

    Code (Text):
    <!DOCTYPE html>
    <html>
    <body>

    <script  type="text/javascript">

    function writeMonthOptions(){
        var monthsName=new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        var monthCounter;
       
        for(monthCounter=0; monthCounter<monthsName.length; monthCounter++)
            document.write('<OPTION value=' + (monthCounter+1) + '>' + monthsName[monthCounter]);
    }

    function writeDayOptions(){
    var mC=monthChosen.options[monthChosen.selectedIndex].value;
    var dayCounter;

        if(mC==2){
            daysNum = 29;
        }
        else if(mC==4 || mC==6 || mC==9 || mC==11){
            daysNum = 30;
        }
        else{
            daysNum = 31;
        }

    var i;
    var j;
    var k;
    var x=document.getElementById("dayChosen");

        if (x.options.length==1){
            for(i=1; i<=daysNum; i++){
                var opts=document.createElement("option");
                opts.value=i;
                opts.text=i;
                x.add(opts,null);
            }
        }
       
        else{
            for(j=1; j<x.options.length; ){
                x.remove(j);
            }
           
            for(k=1; k<=daysNum; k++){
                var opts=document.createElement("option");
                opts.value=k;
                opts.text=k;
                x.add(opts,null);
            }
        }  
               
    }

    </script>

    <select id="monthChosen" onChange="writeDayOptions()">
    <option>Month</option>
    <script language=JavaScript>
    writeMonthOptions();
    </script>
    </select>

    <select id="dayChosen">
    <option>Day</option>
    </select>


    </body>
    </html>
    and guess what? There was a code for this purpose in w3school and I found it just now. :D But I am really glad that I got to learn a lot. I am kind of thanking my luck for not finding the code earlier. :D
     
  8. Mar 12, 2013 #7

    Mark44

    Staff: Mentor

    Yes, I'm sure you learned more by writing the code than by copying code you found.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Javascript problem
  1. Javascript Help (Replies: 4)

  2. Frontpage JavaScript (Replies: 3)

Loading...