Textfield to Textfield - Exercise

Contact Us or call 1-877-932-8228
Textfield to Textfield - Exercise

Textfield to Textfield

Duration: 15 to 25 minutes.

In this exercise, you will write a function that bases the value of one text field on the value of another.

  1. Open FormValidation/Exercises/TextfieldToTextField.html for editing.
  2. Write a function called getMonth() that passes the month number entered by the user to the monthAsString() function in DateUDFs.js and writes the result in the monthName field.

Code Sample:

FormValidation/Exercises/TextfieldToTextField.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js"></script>
<script>
/*
		Write a function called getMonth() that passes the
		month number entered by the user to the monthAsString()
		function in DateUDFs.js and writes the result in
		the monthName field.
	*/
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="dateForm">
	Month Number: <input type="text" name="MonthNumber" id="MonthNumber" size="2">
	<input type="button" value="Get Month" id="getmonthbutton"><br>
	Month Name: <input type="text" name="monthName" id="monthName" size="10">
</form>
</body>
</html>

Code Explanation

Challenge

  1. If the user enters a number less than 1 or greater than 12 or a non-number, have the function write "Bad Number" in the monthName field.
  2. If the user enters a decimal between 1 and 12 (inclusive), strip the decimal portion of the number.

Solution:

FormValidation/Solutions/TextfieldToTextField.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js"></script>
<script>
function getMonth(){
		var elemMonthNumber = document.getElementById("monthNumber");
		var elemMonthName = document.getElementById("monthName");
		var month = monthAsString(elemMonthNumber.value);
		
		elemMonthName.value = month;
	}

	window.onload = function() {
		document.getElementById("getMonthButton").addEventListener("click", function(){
	    	getMonth();
		});
	}
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="dateForm">
	Month Number: <input type="text" name="monthNumber" id="monthNumber" size="2">
	<input type="button" value="Get Month" id="getMonthButton"><br>
	Month Name: <input type="text" name="monthName" id="monthName" size="10">
</form>
</body>
</html>

Code Explanation

Challenge Solution:

FormValidation/Solutions/TextfieldToTextField-challenge.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Textfield to Textfield</title>
<script src="DateUDFs.js"></script>
<script>
	function getMonth(){
		var elemMonthNumber = document.getElementById("monthNumber");
		var elemMonthName = document.getElementById("monthName");
		var monthNum = parseInt(elemMonthNumber.value);
		
		var month = (monthNum >= 1 && monthNum <= 12) ? monthAsString(monthNum) : "Bad Number";
				
		elemMonthName.value = month;
	}

	window.onload = function() {
		document.getElementById("getMonthButton").addEventListener("click", function(){
	    	getMonth();
		});
	}
</script>
</head>
<body>
<h1>Month Check</h1>
<form name="dateForm">
	Month Number: <input type="text" name="monthNumber" id="monthNumber" size="2">
	<input type="button" value="Get Month" id="getMonthButton"><br>
	Month Name: <input type="text" name="monthName" id="monthName" size="10">
</form>
</body>
</html>

Code Explanation

Notice the use of the ternary operator.

Next