Operators Calculation : Two Numbers Calculation using Operators Like (+,-,/,*,%) Mathematical Operators.
Addition , Subtraction, Division,Multiplication and Modules.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Two Numbers Calculation Operators with Forms | Ahirlabs Programs Demo </title>
<style>
.resultdiv {
font-size: 50px;
}
</style>
</head>
<body>
<h2>Two Numbers Calculation using Operators with Forms</h2>
<form method="post">
<p> Enter First Value <input type="text" name="val_1" id="val_1" /></p>
<p>Enter Second Value <input type="text" name="val_2" id="val_2" /></p>
<p>
<select name="operator" id="operator">
<option value="0"> Select Operator </option>
<option value="1"> + Addition </option>
<option value="2"> - Subtraction </option>
<option value="3"> * Multiplication </option>
<option value="4"> / Division </option>
<option value="5"> % Modules </option>
</select></p>
<input type="button" name="result" value="Result" onclick="calculate()">
</form>
</div>
<div>
<div id="result"></div>
</div>
<script type="text/javascript">
function calculate() {
var a = document.getElementById("val_1").value;
var b = document.getElementById("val_2").value;
var operator = document.getElementById("operator").value;
try {
if (a == '' || b == '' || a == 0 || b == 0) {
alert("Please Enter Value Greater Than 0");
} else if (operator == '0') {
alert("Select Operator");
} else {
var A = Number(a);
var B = Number(b);
var C = 0;
var output = "";
if (operator == '1') {
C = A + B;
output = "" + A + "+" + B + "=" + C;
}
if (operator == '2') {
C = A - B;
output = "" + A + "-" + B + "=" + C;
}
if (operator == '3') {
C = A * B;
output = "" + A + "*" + B + "=" + C;
}
if (operator == '4') {
C = A / B;
output = "" + A + "/" + B + "=" + C;
}
if (operator == '5') {
C = A % B;
output = "" + A + "%" + B + "=" + C;
}
var element = document.getElementById("result").innerHTML = "<div class='resultdiv'>" + output + "</div>";
}
} catch(err) {
}
}
</script>
</body>
</html>Explanation
Step 1. First make form with define with id. Like val_1 ,val_2 & operator .
Step 2. Button for trigger the function which calculate the values by using onclick=”calculate()”
Step 3. Make function name of calculate()
Step 4. Declare variable and Collect value var a = document.getElementById(“val_1”).value; and same as Val_2 & operator.
Step 5. Try Catch its a function which first try until not error generated,if any error generated other function Catch then Error you print cause of error.
step 6. 1st Validation by if number value is zero or Null then alert(“Please Enter Value”)
Step 7. 2nd Validation Checking Operator is Selecting or Not if not it alert(“Please Select operator”) .
Step 6. Last else part after cross validation part, var A = Number(a); var B = Number(b); var C=0; by check the operation and perform the +,-,*,/,%. Between two numbers Like C = A+B.
Step 8. document.getElementById(“result”).innerHTML is for display the result on div after completed.
Step 9. innerHTML is property which add text between Tags.LIKE <div id=”result”> Text </div> or <p id=”result”>Text</p>.
Demo
