Example : How to add two values and display the addition result [Addition of two values].
<!DOCTYPE html>
<html>
<head>
<title>Addition of two values</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var first="";
var second="";
var TA="";
//var first="", second="", TA="", Total;
function enter1()
{
var x=event.keyCode||event.which;
if(x===13)
{
first=document.form1.Txt1stValue1.value;
event.preventDefault();
document.form1.Txt2ndValue1.focus();
}
}
function enter2()
{
var x=event.keyCode||event.which;
if(x===13)
{
second=document.form1.Txt2ndValue1.value;
event.preventDefault();
document.form1.TxtValue1.focus();
TA=parseInt(first)+parseInt(second);
document.form1.TxtValue1.value=TA;
}
}
</script>
</head>
<body>
<form name="form1">
<table>
<tr>
<td>1st value</td>
<td>:</td>
<td>
<input type="text" autofocus="" name="Txt1stValue1" id="Txt1stValue2"
onkeypress="enter1()" style="padding:2px; border-radius: 4px"
placeholder="Enter First Value">
</td>
</tr>
<tr>
<td>2nd value</td>
<td>:</td>
<td>
<input type="text" name="Txt2ndValue1" id="Txt2ndValue2" onkeypress
="enter2()" style="padding:2px; border-radius: 4px" placeholder=
"Enter Second Value">
</td>
</tr>
<tr>
<td>Sum Total value</td>
<td>:</td>
<td>
<input type="text" readonly="" name="TxtValue1" id="TxtValue2"
style="padding:2px; border-radius: 4px" placeholder="The Result is">
</td>
</tr>
</table>
</form>
</body>
</html>Example : A JS program/code segments to make a Simple Calculator through different ways.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function calculate()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var opt = document.getElementById("opt").value;
var result;
if (opt == "+")
{
result = num1 + num2;
}
else if (opt == "-")
{
result = num1 - num2;
}
else if (opt == "*")
{
result = num1 * num2;
}
else if (opt == "/")
{
result = num1 / num2;
}
else if (opt == "%")
{
result = num1 % num2;
}
//document.getElementById("result").innerHTML = result;
alert(result);
}
</script>
</head>
<body>
<h1>Simple Calculator Using JS</h1>
<form>
<table>
<tr>
<td><label>Number 1</label></td>
<td>:</td>
<td><input type="text" id="num1"/></td>
</tr>
<tr>
<td><label>Operator</label></td>
<td>:</td>
<td>
<select id="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
</td>
</tr>
<tr>
<td><label>Number 2</label></td>
<td>:</td>
<td><input type="text" id="num2" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button onclick="calculate()">Calculate</button> <button type="reset">Reset</button></td>
</tr>
</table>
</form>
</body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function calculate()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var opt = document.getElementById("opt").value;
var result;
switch(opt)
{
case '+':
{
result = num1 + num2;
break;
}
case '-':
{
result = num1 - num2;
break;
}
case '*':
{
result = num1 * num2;
break;
}
case '/':
{
result = num1 / num2;
break;
}
case '%':
{
result = num1 % num2;
break;
}
default:
{
document.write("<b>Invalid/Wrong Choice</b>");
}
}
//document.getElementById("result").innerHTML = result;
alert(result);
}
</script>
</head>
<body>
<h1>Simple Calculator Using JS</h1>
<form>
<table>
<tr>
<td><label>Number 1</label></td>
<td>:</td>
<td><input type="text" id="num1"/></td>
</tr>
<tr>
<td><label>Operator</label></td>
<td>:</td>
<td>
<select id="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
</td>
</tr>
<tr>
<td><label>Number 2</label></td>
<td>:</td>
<td><input type="text" id="num2" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button onclick="calculate()">Calculate</button> <button type="reset">Reset</button></td>
</tr>
</table>
</form>
</body>
</html>
----------------- OR ------------------
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function addition()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 + num2;
window.alert(result);
}
function sub()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 - num2;
window.alert(result);
}
function mult()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 * num2;
window.alert(result);
}
function div()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 / num2;
window.alert(result);
}
function mod()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 % num2;
window.alert(result);
}
</script>
</head>
<body>
<h1>Simple Calculator Program</h1>
<form name="form1">
<table>
<tr>
<td><label>Number 1</label></td>
<td>:</td>
<td><input type="text" id="num1" name="fnbox"/></td>
</tr>
<tr>
<td><label>Number 2</label></td>
<td>:</td>
<td><input type="text" id="num2" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" onclick="addition()">
<input type="submit" onclick="sub()">
<input type="submit" onclick="mult()">
<input type="submit" onclick="div()">
<input type="submit" onclick="mod()">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
------------------- OR --------------------
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<script>
function cancel()
{
document.form1.fnbox.value='';
document.form1.snbox.value='';
document.form1.fnbox.focus();
}
function addition()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 + num2;
window.alert(result);
}
function sub()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 - num2;
window.alert(result);
}
function mult()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 * num2;
window.alert(result);
}
function div()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 / num2;
window.alert(result);
}
function mod()
{
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
result = num1 % num2;
window.alert(result);
}
</script>
</head>
<body>
<h1>Simple Calculator Program</h1>
<form name="form1">
<table>
<tr>
<td><label>Number 1</label></td>
<td>:</td>
<td><input type="text" id="num1" name="fnbox"/></td>
</tr>
<tr>
<td><label>Number 2</label></td>
<td>:</td>
<td><input type="text" id="num2" name="snbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" onclick="addition()" value="Addition">
<input type="button" onclick="sub()" value="Sub">
<input type="button" onclick="mult()" value="Mult">
<input type="button" onclick="div()" value="Div">
<input type="button" onclick="mod()" value="Mod">
<input type="button" onclick="cancel()" value="Cancel">
</td>
</tr>
</table>
</form>
</body>
</html> 
0 Comments