JavaScript tutorial- acceptable text length


Calculator: acceptable text length

This JavaScript simple calculator allows the user to input a number of ten characters. It doesn't accept numbers that contain more than ten characters.

You can do this by using the maxlength property of the text box:

<input type="text" name="txtvalue" maxlength="10" style="width: 164px"></td>
The maxlength="10" lets the user press the keys ten time only. By using this property you can limit the characters of a number to input. However, when the user makes input by pushing buttons the input number can be more than ten characters long. To allow the use to input a number that contain characters less than to equal to 10, you need to check the length of the number input before appending more characters.

Example:

function get0(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="0";
}

Therefore, the code of our JavaScript calculator in this phase should be:

<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;
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="+";
val1=document.forms[0].txtvalue.value;
document.getElementById("display").innerHTML =val1+"+";
document.forms[0].txtvalue.value="";



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

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

}

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

}

function divide(){
sign="/";
val1=document.forms[0].txtvalue.value;
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;

}


}

function cleartext(){
document.forms[0].txtvalue.value="";
}





</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"></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.