JavaScript tutorial-calculations


Calculator: calculations

To do calculations on the input numbers, you need to make the rest of the buttons to perform their work.

The button buttonadd, buttonsubtract, buttonmultiply, and buttondivide are used to record the arithmetic operators(+,-,*, and /) respectivly as well as the first input number.

The button buttonresult will do calculations and display the result.

The button is used to clear the values stored in variables, text box, and div tag.

<html>
<head>
<title>A simple calculator</title>
<script type="text/javascript" language="JavaScript">
var sign;
var val1;
var val2;
function get0(){
document.forms[0].txtvalue.value+="0";
}
function get1(){
document.forms[0].txtvalue.value+="1";
}
function get2(){
document.forms[0].txtvalue.value+="2";
}
function get3(){
document.forms[0].txtvalue.value+="3";
}
function get4(){
document.forms[0].txtvalue.value+="4";
}
function get5(){
document.forms[0].txtvalue.value+="5";
}
function get6(){
document.forms[0].txtvalue.value+="6";
}
function get7(){
document.forms[0].txtvalue.value+="7";
}
function get8(){
document.forms[0].txtvalue.value+="8";
}
function get9(){
document.forms[0].txtvalue.value+="9";
}

function add(){
sign="+";
val1=document.forms[0].txtvalue.value;
document.forms[0].txtvalue.value="";

}
function subtract(){
sign="-";
val1=document.forms[0].txtvalue.value;
document.forms[0].txtvalue.value="";

}

function multiply(){
sign="*";
val1=document.forms[0].txtvalue.value;
document.forms[0].txtvalue.value="";

}

function divide(){
sign="/";
val1=document.forms[0].txtvalue.value;
document.forms[0].txtvalue.value="";

}

function result(){
var res;
val2=document.forms[0].txtvalue.value;
if(sign=="+") res=parseInt(val1)+parseInt(val2);
else if(sign=="-") res=parseInt(val1)-parseInt(val2);
else if(sign=="*") res=parseInt(val1)*parseInt(val2);
else res=parseInt(val1)/parseInt(val2);
if(!isNaN(res)) document.forms[0].txtvalue.value=res;


}

function cleartext(){


document.forms[0].txtvalue.value="";

val1="";

val2="";

res="";


}



</script>
</head>
<body>
<form >
<table style="border: 2; background-color: silver;">
<tr>
<td colspan="6">
<div id="display"></div>
<input type="text" name="txtvalue" maxlength="10" style="width: 164px"></td>
</tr>
<tr >

<td><input type="button" name="button0" value="0" onclick="get0()"></td>
<td><input type="button" name="button1" value="1" onclick="get1()"></td>
<td><input type="button" name="button2" value="2" onclick="get2()"></td>
<td><input type="button" name="button3" value="3" onclick="get3()"></td>
<td><input type="button" name="button4" value="4" onclick="get4()"></td>
<td><input type="button" name="buttonadd" value="+" onclick="add()"></td>
<td><input type="button" name="buttonsubtract" value="-" onclick="subtract()"></td>
<td><input type="button" name="buttonresult" value="=" onclick="result()"></td>


</tr>
<tr>

<td ><input type="button" name="button5" value="5" onclick="get5()"></td>
<td><input type="button" name="button6" value="6" onclick="get6()"></td>
<td><input type="button" name="button7" value="7" onclick="get7()"></td>
<td><input type="button" name="button8" value="8" onclick="get8()"></td>
<td><input type="button" name="button9" value="9" onclick="get9()"></td>
<td><input type="button" name="buttonmultiply" value="*" onclick="multiply()" ></td>
<td><input type="button" name="buttondivide" value="/" onclick="divide()" ></td>
<td><input type="button" name="buttonclear" value="C" onclick="cleartext()"></td>


</tr>
</table>

</form>
</body>
</html>

Note: we use isNaN() function to make sure that the result value is the number before the result is assigned to text box and display it in the div tag. This is to avoid displaying NaN.




Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.