Textfield to Textfield - Exercise

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

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

This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.