﻿ JavaScript tutorial- make more user-friendly

# JavaScript tutorial- make more user-friendly

## Calculator: make more user-friendly

To make the JavaScript calculator more user-friendly, we use a div tag to display the progress of the operation. This will show the numbers input by the user and the result right above the text box that displays only the final result.

To complete this task we have to modify the JavaScript code in the function add(), subtract(), multiply(), and divide(). We also declare i variable to store the value 0 or 1 to help us identify the first click. We modify them to make user our calculator can handle some important things:

-When the user changes from one operation to another(e.g. from add to subtract) before clicking the result button.

-When the user clicks buttons to add, subtract, multiply, or divide numbers without a number in the text box.

How to change value display right above the text box?

To understand how we handle these situations, please read the piece code and expiations:

sign="+";

if(i==0) {
if(document.forms[0].txtvalue.value=="") val1=0;
else val1=document.forms[0].txtvalue.value;
i=1;
}
document.getElementById("display").innerHTML =val1+"+";
document.forms[0].txtvalue.value="";

}

When a user clicks on the button to add, subtract, multiply, or divide numbers, the first thing is to record the operator(+,-,*, and /). The second thing is to check whether it is the first click(i=0). If it is the first click and the text box is blank, the 0 will be assigned to variable val1(stores the first value). If it is the first click and the text box is not blank, the variable val1 will contain the value of the text box. Then i is updated to 1. The value of the i variable will be reset to 0 when the clear or results button is clicked. The final step of this piece of JavaScript code is to update the value displayed right above the text box and clear the text box for further input.

The final code of JavaScript calculator program is shown below:

<html>
<meta http-equiv="Content-Language" content="en-us">
<title>A simple calculator</title>
<script type="text/javascript" language="JavaScript">
var sign;
var val1;
var val2;
var i=0;
function get0(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="0";
}
function get1(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="1";
}
function get2(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="2";
}
function get3(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="3";
}
function get4(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="4";
}
function get5(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="5";
}
function get6(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="6";
}
function get7(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="7";
}
function get8(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="8";
}
function get9(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="9";
}

sign="+";

if(i==0) {
if(document.forms[0].txtvalue.value=="") val1=0;
else val1=document.forms[0].txtvalue.value;
i=1;
}
document.getElementById("display").innerHTML =val1+"+";
document.forms[0].txtvalue.value="";

}
function subtract(){
sign="-";
if(i==0) {
if(document.forms[0].txtvalue.value=="") val1=0;
else val1=document.forms[0].txtvalue.value;
i=1;
}
document.getElementById("display").innerHTML =val1+"-";

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

}

function multiply(){
sign="*";
if(i==0) {
if(document.forms[0].txtvalue.value=="") val1=0;
else val1=document.forms[0].txtvalue.value;
i=1;
}
document.getElementById("display").innerHTML =val1+"*";
document.forms[0].txtvalue.value="";
i=1;
}

function divide(){
sign="/";
if(i==0) {
if(document.forms[0].txtvalue.value=="") val1=0;
else val1=document.forms[0].txtvalue.value;
i=1;
}
document.getElementById("display").innerHTML =val1+"/";
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;
document.getElementById("display").innerHTML+=val2+"="+res;
i=0;

}

}

function cleartext(){
document.forms[0].txtvalue.value="";
val1="";
val2="";
res="";
document.getElementById("display").innerHTML="";

i=0;
}

function check(e){
var code=e.keyCode? e.keyCode:e.charCode;
if((code>=48 && code<=57)|| code==8) return true;
else return false;
}

</script>
<body>
<form action="#">
<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" onkeypress="return check(event)"></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="buttonsubtract" value="-" onclick="subtract()"></td>
<td style="width: 6px"><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 style="width: 6px"><input type="button" name="buttonclear" value="C" onclick="cleartext()"></td>

</tr>
</table>

</form>

</body>
</html>