JavaScript – Addition, Subtraction, Multiplication & Division!

In this post, you will be learning how to do Addition, Subtraction, Multiplication & Division using pure JavaScript. Let’s see a simple snippet first:

//addition
add = 5 + 2;
document.write(add+"<br>");

//subtraction
sub = 5 - 2;
document.write(sub+"<br>");

//multiplication
mul = 5 * 2;
document.write(mul+"<br>");

//division
div = 5 / 2;
document.write(div+"<br>"); 

It’s so simple as that. Now let’s create a good looking HTML page with input boxes and submit button so the user can give any numbers to calculate the values dynamically.

<!DOCTYPE html>
<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Addtion, Substraction, Divide &amp; Multiplication using javaScript!</title>
	<script>
		function Calc(){
			var val1 = document.getElementById("val1").value;
			var val2 = document.getElementById("val2").value;
			var opt = document.getElementById("opt").value;
			
			var ans = eval(val1 + opt + val2);
			document.getElementById("ans").value = ans;
		}
	</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<h3>Addition, Subtraction, Multiplication &amp; Division using JavaScript!</h3>
				<hr />
				<div class="col-lg-1">
					<label for="desc">Value 1:</label> 
				</div>
				<div class="col-lg-1">
					<input type="number" class="form-control" id="val1" value="5" required>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-lg-1">
					<label for="desc">Value 2:</label> 
				</div>
				<div class="col-lg-1">
					<input type="number" class="form-control" id="val2" value="2" required>
				</div>
				<div class="col-lg-1">
					<select id="opt" class="form-control">
						<option>+</option>
						<option>-</option>
						<option>*</option>
						<option>/</option>
					</select>
				</div>

			</div>
			<br />
			<div class="row">
				<div class="col-lg-1">
					<label for="desc">Answer:</label> 
				</div>
				<div class="col-lg-1">
					<input type="text" class="form-control" id="ans" readonly>
				</div>
				<div class="col-lg-1">
					<button type="submit" name="submit" class="btn btn-success" onClick="Calc()">Submit</button>
				</div>

			</div>
		</div>
	</body>
</html>

I have used Bootstrap Framework for better look and fee in the above example. You can just copy paste the code and save it as a .html file to run this script immediately.

For you convienience I have give the demo here as well: