Need help with a Basic Calculator

**Mitchman** · 02-20-2009 10:58 AM

I am in a Java script class and I need a littel help.

My teacher want me to make a calculator. with three textboxes and 3 radio buttons.

1) In the first textbox you put a number
2) Then select on of the radio buttons +,x or -.
3) Then you put another number in the second textbox.
4) You press the = button and the ansour apears in the 3rd texbox.

Here is what I came up with so far.

<script type="text/javascript">

function multipier(){
var x=document.getElementById("tb1").value
var y=document.getElementById("tb2").value

}

function subtracter(){
var a=document.getElementById("tb1").value
var b=document.getElementById("tb2").value
document.getElementById("tb3").value=a -b
}

function adder(){
var c=document.getElementById("tb1").value
var d=document.getElementById("tb2").value
document.getElementById("tb3").value=c +d
}

function divide(){
var e=document.getElementById("tb1").value
var f=document.getElementById("tb2").value
document.getElementById("tb3").value=e /f
}

function evalit(){
document.form1.box1.value=eval(document.form1.box1.value)
document.getElementById("tb3").value=x *y
}

</script>

<BODY>

<form name="form1">

<input type="text"size="2" id="tb1"/>

<br/><input type="radio" name="r" value="*" onClick="multipier()"/>*
<br/><input type="radio" name="r" value="-" onClick="subtracter()"/>-
<br/><input type="radio" name="r" value="+" onClick="adder()"/>+
<br/><input type="radio" name="r" value="/" onClick="divide()"/>/
<input type="text"size="2" id="tb2"/>
<input type="button" value="=" name="eq" onClick="evalit()">
<input type="text"size="2" name="box1" id="tb3"/>

</form>

</BODY>
</HTML>

**JMRKER** · 02-20-2009 11:14 AM

Because JS works with strings from input, not numbers
Use parseFloat for each value input

OR
Multiply each input value by 1 to convert to number.
Example:

Code:

function multipier(){
  var x=document.getElementById("tb1").value * 1;
  var y=document.getElementById("tb2").value * 1;
  document.getElementById("tb3").value=x * y;
}

Also not that division by zero is illegal, so you might want to check for that.
And, users sometimes do not type correctly, so may want to check isNaN().

**Mitchman** · 02-20-2009 11:41 AM

Thanks JMRKER.

The real problem I am having is that I don't want the anser to go in the text box until I press the = button. I would like to do this with the aval function in the = button.
Or is there a better way?

**JMRKER** · 02-20-2009 12:19 PM

Simplified to match your code ...

Code:

<HTML>
<head>
<title>Simple Calculator</title>

<script type="text/javascript">
var ans = 0;

function calc(action){
  var x=document.getElementById("tb1").value * 1;
  var y=document.getElementById("tb2").value * 1;
  switch (action) {
    case '+' : ans = x+y;  break;
    case '-' : ans = x-y;  break;
    case '*' : ans = x*y;  break;
    case '/' : ans = x/y;  break;  // still need division by zero check
    default : alert(action+' is invalid operation');
  }
}

function evalit(){
  document.getElementById("tb3").value= ans;
}

</script>
</head>

<BODY>

<form name="form1">

<input type="text"size="2" id="tb1"/>

<br/><input type="radio" name="r" value="*" onClick="calc(this.value)"/>*
<br/><input type="radio" name="r" value="-" onClick="calc(this.value)"/>-
<br/><input type="radio" name="r" value="+" onClick="calc(this.value)"/>+
<br/><input type="radio" name="r" value="/" onClick="calc(this.value)"/>/
<br/>
<input type="text"size="2" id="tb2"/>
<br />
<input type="button" value="=" name="eq" onClick="evalit()">
<input type="text"size="2" name="box1" id="tb3"/>

</form>

</BODY>
</HTML>

**Mitchman** · 02-20-2009 12:37 PM

Thanks JMRKER.

The works great

Thread: Need help with a Basic Calculator

Thread Tools

Display

Need help with a Basic Calculator

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions