Selection: Making Decisions in JavaScript

Selection: Making Decisions in JavaScript

This week was all about “if,” “else,” and “switch,” common methods of decision making in JavaScript (and most all programming languages). In that context we needed to get a strong handle on relationship operators, which are used to test a condition within an “if” or “switch” statement and always results in a “true” or “false” boolean expression. Depending on the result of the test, a line of code will be executed or ignored. In this way, JavaScript can make conditional decisions that result in different output to the user.

JavaScript Relational Operators
Operator Name Example
< less than if (x < 20)
> greater than if (x > y)
<= less than or equal to if (day <= last)
>= greater than or equal to if (age >= 10)
== equal to if (dir == north)
!= not equal to if (dir != north)

A common error when using relationship operators is forgetting that comparing the equality of two values requires double equal signs (==)  instead of a single equal sign (=). A single equal is used to assign a value to a variable, not to compare two values. I found that I sometimes made this mistake in my own programs this week.

For my homework this week I wrote two programs. One took input from the user on the type of weather and returned the best type of footwear for the day. This program used a “switch” to determine the appropriate output.

<script type="text/javascript">
/* Defining Table
 * Input: Weather type of hot, rain, or snow.
 * Processing: Determine type of footwear for weather.
 * Output: Display footwear to user.
 */
function chooseFootwear() {
	// Get type of weather from user and store as var weather.
	var weather = document.getElementById('weatherInput').value;
	
	// Determine footwear based on weather condition.
	var footwear;
	switch (weather) {
	case 'hot':
			footwear = 'sandals';
			break;
	case 'rain':
			footwear = 'galoshes';
			break;
	case 'snow':
			footwear = 'boots';
			break;
	}		

	// Display footwear to user.
	document.getElementById('outputDiv').innerHTML = "It's a great day to wear " + footwear + "!";
}
</script>

The second program was a simple math checker that allowed the user to enter a math problem and answer, and the program would return whether their answer was correct or not. I first wrote this program using the “eval()” method to do the arithmetic directly from the user’s input. We hadn’t covered the “eval()” method in class, but I wasn’t sure how to convert the user’s operator input to an actual operator in the program, so I did some research and found “eval().”

After thinking some more and seeing some other examples, I realized I didn’t need to convert the operator  if I just told the program to look at it and execute the associated math. So I rewrote the program using “if/else,” which resulted in a longer program, but was good practice.

First Math Checker

function mathChecker() {

	// Receive, parse, and store vars numOne, mathOp, numTwo, and answer 
	// from user input. 
	var numOne = parseFloat(document.getElementById("numOneInput").value);
	var mathOp = document.getElementById("mathOpInput").value;
	var numTwo = parseFloat(document.getElementById("numTwoInput").value);
	var answer = parseFloat(document.getElementById("answerInput").value);
	
	// Determine correct answer from numbers and operator given and check 
	// against answer given.
	var correctAnswer = eval(numOne + mathOp + numTwo);
	var output;
	if (correctAnswer == answer) {
		output = "Correct! Good job.";
	}
	else {
		output = "Incorrect. Try again!";
	}
	
	// Display to user if answer was correct or not.
	document.getElementById("outputDiv").innerHTML = output;
}

Second Math Checker

function mathChecker() {

	// Receive, parse, and store vars numOne, mathOp, numTwo, and answer 
	// from user input. 
	var numOne = parseFloat(document.getElementById("numOneInput").value);
	var mathOp = document.getElementById("mathOpInput").value;
	var numTwo = parseFloat(document.getElementById("numTwoInput").value);
	var answer = parseFloat(document.getElementById("answerInput").value);
	
	// Determine correct answer from numbers and operator given and check 
	// against answer given.
	// OLD CODE: var correctAnswer = eval(numOne + mathOp + numTwo);
	var correctAnswer;
	if (mathOp == "+") {
		correctAnswer = numOne + numTwo;
	} 
		else if (mathOp == "-") {
			correctAnswer = numOne - numTwo;
		} 
		else if (mathOp == "*") {
			correctAnswer = numOne * numTwo;
		} 
		else if (mathOp == "/") {
			correctAnswer = numOne / numTwo;
		} 
	else {
		correctAnswer = "invalid operator"
	}
	
	var output;
	if (correctAnswer == "invalid operator") {
		output = "Please enter +, -, *, or / as an operator.";
	} 
		else if (correctAnswer == answer) {
			output = "Correct! Good job.";
		}
	else {
		output = "Incorrect. Try again!";
	}
	
	// Display to user if answer was correct or not.
	document.getElementById("outputDiv").innerHTML = output;
}

Leave a Reply

Your email address will not be published. Required fields are marked *