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.

Make more user-friendly by shoing process.  

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:

function add(){
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>
<head>
<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";
}

function add(){
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>
</head>
<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="buttonadd" value="+" onclick="add()"></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>




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.