Log in

View Full Version : Basic Calculator


aka NatWest
10-20-2009, 05:57 PM
Ok, I have spent ages attempting to make a basic addition calculator in Javascript for my webpage, however I am new to all this and can't grasp it, so I just want to complete my course and maybe look at my other options :/

What I need is a JavaScript script:

Calculator

Enter a number to be calculated:

(A box where the user can enter a number) + (another box where a user can enter a number) = (a box with the answer shown)

(a 'add' button underneath the first box)

However my course says that I must edit this script:




<html>
<head>
<title>The Adding Calculator</title>

<script language="Javascript">
<!--

function Calculate()

{
var first = document.form1.first.value;

var second = document.form1.second.value;

if(document.form1.first.value == 0)
{
alert("Please ensure that you have entered a number into each of the boxes");
return false;
}
if (document.form1.second.value == 0)
{
alert("Please ensure that you have entered a number into each of the boxes");
return false;
}

addition = parseInt(first) + parseInt(second);

total = first + " " + " + " + second + " " + "=" + " " + addition;

alert(total);

}




//-->
</script>

</head>

<body>

<h1> The Adding Calculator </h1>

<form name="form1">



Enter some numbers in these boxes:<br>
<br>


<input type="text" name="first" size="20">+<input type="text" name="second" size="20"> <input type="button" value="Calculate" onClick="Calculate()">
</form>


</body>

</html>



And incorporate the eval() function - but I have no idea how to do this or what this is :/


I am new here so sorry if this is in the wrong place or if I have messed anything else up.

I hope this makes sense. Thanks for any help/advice!
codeexploiter
10-21-2009, 04:52 AM
Here is a demo page with what you want



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Calculator</title>
<script type="text/javascript">
function trim(str){
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function isNumeric(input){
var regexp = /^[0-9]+$/;
if (regexp.test(input)) {
return true;
}
return false;
}
function calculate(){
var f, s;
f = trim(document.forms['form1'].elements['first'].value);
s = trim(document.forms['form1'].elements['second'].value);
if (f === "" || s === "") {
alert("Any one/All of the textbox contains empty space. Enter a number in both textboxes");
return false;
}
if (isNumeric(f) && isNumeric(s)) {
f = parseInt(f);
s = parseInt(s);
//Commented the validation if the numbers are 0
/*if(f === 0 || s === 0){
alert("Any one/All of the textbox contains 0. Enter a number greater than 0 in both textboxes");
}*/
document.forms['form1'].elements['result'].value = f + s
}else {
alert("Any one/All of the textbox contains non numbers. Enter a number in both textboxes");
}
}
</script>
</head>
<body>
<h1>The Adding Calculator</h1>
<form name="form1">
<label>
Enter Some Numbers in these boxes
</label>
<br>
<br>
<input type="text" name="first" size="20">
<label>
+
</label>
<input type="text" name="second" size="20">
<label>
=
</label>
<input type="text" name="result" size="20">
<br>
<input type="button" value="Calculate" onclick="calculate()">
</form>
</body>
</html>


I have commented the validation if the user enter 0 in any one/all of the textbox and try to calculate. Since 0 is a number in my opinion the calculation should be carried out. If you want to stop the function if any of the number is 0 uncomment the highlighted section in the above code.

It would be better if you avoid the use of eval() in JavaScript if that is possible. If you can do something without using eval() do it that way. In this case you can do what you want without using eval() simply.

Hope this helps.
aka NatWest
10-21-2009, 06:51 PM
Thanks so much

I just tested it and it works like a treat! If I could then I'd hug you (and no I'm not a guy so it's not gay ;) )

Was this the easiest way of doing this btw?