Solve Javascript Problem: 2 Dropdowns Menus

  • Context: Java 
  • Thread starter Thread starter nazia_f
  • Start date Start date
  • Tags Tags
    Javascript
Click For Summary

Discussion Overview

The discussion revolves around a JavaScript programming problem involving the creation of two dropdown menus: one for selecting a month and another for selecting the corresponding number of days in that month. Participants are seeking to troubleshoot and improve the provided code, which is intended to dynamically populate the day dropdown based on the selected month.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Homework-related

Main Points Raised

  • One participant describes their goal of creating two dropdown menus and shares their initial code, expressing confusion about errors encountered.
  • Another participant points out several issues in the code, including a misspelling of "function," incorrect parameter usage in function calls, and an infinite loop in the writeDay function.
  • Concerns are raised about the writeDay function overwriting the dropdowns instead of populating them correctly.
  • A participant attempts to fix the issues by making the daysNum variable global but reports that it still does not work as intended.
  • Suggestions are made to merge the functionality of the writeDay function into writeDayOptions to streamline the code.
  • One participant mentions the use of browser debugging tools to help identify issues in the code.
  • Another participant recommends checking online resources for tutorials on manipulating select elements in JavaScript.

Areas of Agreement / Disagreement

Participants generally agree on the existence of multiple issues in the code, but there is no consensus on the best approach to resolve them, as various solutions and modifications are proposed.

Contextual Notes

Limitations include unresolved issues with variable scope, function definitions, and the proper method for dynamically updating the dropdown menus without overwriting existing elements.

nazia_f
Messages
20
Reaction score
0
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:
Technology news on Phys.org
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.
nazia_f said:
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.
Code: 
<!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[i] + '>' + days[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>

You have several problems that I see.
1) "funtion" is incorrect in your definition 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: 
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.
 
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.
 
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: 
<!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:
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: 
<!DOCTYPE html> 
<html>
<body>

<script  type="text/javascript">

var daysNum=new Array();
var firstRun = false;  // Not currently usedfunction 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>
 
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: 
<!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
 
nazia_f said:
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!

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
Yes, I'm sure you learned more by writing the code than by copying code you found.
 

Similar threads

Java Problem working with multi-dimensional arrays in Javascript
  • · Replies 3 ·
Replies
3
Views
2K
Java Get Help with Java Script Code: Calculate Day Count Since 1922 Dec. 18
  • · Replies 7 ·
Replies
7
Views
4K