SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Feb 2002
    Location
    NZ
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    attempt at calculator

    Sorry guys but js aint a strong point, I could do this in php but I want it as a pop-up, although I aint got that figured out yet either.

    Thanks in advance

    Heres what I am trying to do:
    Original value input: 1
    Plus 10% : 1.10
    Add new value input eg: 0.50
    new total: 1.60
    Plus 10% : 1.76
    Answer : 1.76

    Code:
    <html>
    <head>
    <title>Total Calculator</title>
    <SCRIPT language=JavaScript>
    <!--
    function newtotal() {
    var a = document.form1.a.value;
    var b = document.form1.b.value;
    c = a/10;										 // original value divided by 10
    d = a+c;										  // original value + 10%
    e = d+b;										 //  new value plus original	parseInt(eat);
    f = e/10;										 // new value divided by 10
    g = e+f;										  // new total
     document.form1.total1.value = g
     }
    //-->
    </SCRIPT>
    </head>
    <body>
    <center>
    <b><h3>Only on monday</h3></b>
    <p>
    <FORM name=form1>
    <TABLE cellSpacing=1 cellPadding=1 border=1>
      <TBODY>
      <TR>
    	<TD align=middle colSpan=3><B><FONT size=4>Total Calculator</FONT></B> 
    	  </TD>
      <TR>
    	<TD>You have<INPUT size=5 name=a> Your increase<INPUT size=5 name=b>?</TD>
    	<TD>Answer: <INPUT maxLength=40 size=20 name=total1></TD>
    	<TD><INPUT onclick=newtotal() type=button value=Calculate></TD>
    </TR>
    </TBODY>
    </TABLE>
    </FORM>
    </center>
    </body>
    </html>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple of things;
    1. You should always start with valid markup. You were using deprecated elements thus making it more difficult for the browser to do it's job
    2. You're taking too many steps in your JavaScript to do the math. I've reduced it to 2 steps, but it can be reduced to just 1
    3. I explicitly declared the variables coming from the form as Numbers. (That doesn't preclude someone from entering letters)

    Take a look:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Total Calculator</title>
    <script type="text/javascript">
    function newtotal() {
    	var a = Number(document.form1.a.value);
    	var b = Number(document.form1.b.value);
    	var c = a * 1.1; // orig + 10%
    	var d = (c + b) * 1.1; //new + increase + 10%
    	document.form1.total1.value = d;
    }
    </script>
    <style type="text/css">
    table {
    	border-collapse:collapse;
    }
    td {
    	padding:2px;
    	border:thin solid #000;
    }
    </style>
    </head>
    <body>
    <div align="center">
    <h3>Only on monday</h3>
    <form name="form1" id="form1" action="" method="get">
    <table>
    	<tbody>
    		<tr>
    			<td colspan="3"><h3>total calculator</h3></td>
    		</tr>
    		<tr>
    			<td>You Have<input type="text" size="5" name="a" id="a" />&nbsp;Your Increase:<input type="text" size="5" name="b" id="b" />?</td>
    			<td>Answer:<input maxlength="40" size="20" name="total1" id="total1" /></td>
    			<td><input name="calc" type="button" id="calc" onclick="newtotal();" value="Calculate" /></td>
    		</tr>
    	</tbody>
    </table>
    </form>
    </div>
    </body>
    </html>
    You could reduce the calculation to just one line:
    var c = ( ((a * 1.1) + b) * 1.1 );
    or even better:
    document.getElementById("result1") = ( ((a * 1.1) + b) * 1.1 );

  3. #3
    SitePoint Guru
    Join Date
    Feb 2002
    Location
    NZ
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dude, its one ugly looking calculator in appearance but I'll tidy it up later.

    I'm doing a js tut now to refresh at much as is possible.

    Cant show me how to get it to round up to two digits, eg 18.77
    At the moment I'm getting 18.7600000002 or something to that effect

  4. #4
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use Math.round(number)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •