Calculator Help

Discussion in 'Javascript' started by mwh, May 11, 2005.

  1. mwh

    mwh Guest

    Hi. If you remember, I posted Expressons Help. Now I am making a
    calculator with javascript. I can't get this to work:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <title>Calculator</title>
    <script language="Javascript">
    <!-- Begin Hiding
    var total = 0
    var operator = 0
    function calculate(number){
    firm = document.form.value1
    firm.value = firm.value + number
    }
    function operator(opvalue){
    theoperator = opvalue
    total = document.form.value1.value
    document.form.sup.value = ""
    }
    function equals(){
    currentDspvalue = eval(document.form.value1.value)
    previousDspvalue = eval(total)
    // add
    if (theoperator == "+"){
    answer = currentDspvalue + previousDspvalue
    }
    // divide
    else if (theoperator == "/"){
    answer = currentDspvalue / previousDspvalue
    }
    // multilply
    else if (theoperator == "*"){
    answer = currentDspvalue * previousDspvalue
    }
    // subtract
    else if (theoperator == "-"){
    answer = currentDspvalue - previousDspvalue
    }
    document.form.sup.value = answer
    }
    // -->
    </script>
    <body bgcolor="blue">
    <form name="form">
    <input name="value1" length=15 type="text"><br>
    <input name="1" type="button" value="1" onClick="calculate(1)">
    <input name="2" type="button" value="2" onClick="calculate(2)">
    <input name="3" type="button" value="3" onClick="calculate(3)">
    <input name="4" type="button" value="4" onClick="calculate(4)">
    <input name="5" type="button" value="5" onClick="calculate(5)">
    <input name="6" type="button" value="6" onClick="calculate(6)">
    <input name="7" type="button" value="7" onClick="calculate(7)">
    <input name="8" type="button" value="8" onClick="calculate(8)">
    <input name="9" type="button" value="9" onClick="calculate(9)">
    <input name="0" type="button" value="0" onClick="calculate(0)">
    <input name="decimal" type="button" value=" . " onClick=calculate(".")>
    <input name="plus" type="button" value="Plus" onClick =operator("+")>
    <input name="minus" type="button" value="minus" onClick =operator("-")>
    <input name="multiply" type="button" value="times" onClick
    =operator("*")>
    <input name="divide" type="button" value="divided by" onClick
    =operator("/")>
    <input name="equals" type="button" value=" = " onClick = "equals()">
    <input name="reset" type="reset" value="clear">
    </form>
    </body>
    </html>

    It works fine until I press the equal button. Instead of displaying the
    answer in the text area, It just says "Error on Page" in the status
    bar.

    Can Anyone help?
    (____)
    (\/)
    /-------\/
    / | MWH ||
    - ||----||
     
    mwh, May 11, 2005
    #1
    1. Advertising

  2. mwh

    RobG Guest

    mwh wrote:
    > Hi. If you remember, I posted Expressons Help. Now I am making a
    > calculator with javascript. I can't get this to work:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <title>Calculator</title>
    > <script language="Javascript">


    The language attribute is depreciated, type is required:

    <script type="text/javascript">

    > <!-- Begin Hiding


    Completely unnecessary.

    > var total = 0


    You should end statements with a semi-colon, though it isn't strictly
    required and isn't causing your issues here.

    var total = 0;

    > var operator = 0
    > function calculate(number){
    > firm = document.form.value1
    > firm.value = firm.value + number
    > }
    > function operator(opvalue){


    You have a global variable called 'operator' and a function called
    'operator'. Firefox assigns 'operator' to the variable, the function
    is not defined. Change the name of either the variable or the
    function.

    Seems you really wanted the global variable to be 'theoperator', so I'd
    change the declaration of the variable (and tweak the name) to:

    var theOperator = 0


    > theoperator = opvalue
    > total = document.form.value1.value
    > document.form.sup.value = ""


    There is no element in the form 'form' with a name of 'sup', did you
    mean 'value1'?

    > }
    > function equals(){


    You have defined equals as a form element name, that conflicts with
    your equals function name - change one of them (I'll change the
    element name since you don't use it for anything anyway).

    > currentDspvalue = eval(document.form.value1.value)


    Do not use 'eval', there is nearly always a better way. In this case,
    it is totally redundant.

    currentDspvalue = document.form.value1.value;

    > previousDspvalue = eval(total)


    And here too.

    previousDspvalue = total;


    > // add
    > if (theoperator == "+"){
    > answer = currentDspvalue + previousDspvalue


    The variables you are adding are likely strings, you need to ensure
    they are numbers. The unary operator is simplest:

    answer = +currentDspvalue + +previousDspvalue;

    > }
    > // divide
    > else if (theoperator == "/"){
    > answer = currentDspvalue / previousDspvalue
    > }
    > // multilply


    multiply ?


    > else if (theoperator == "*"){
    > answer = currentDspvalue * previousDspvalue
    > }
    > // subtract
    > else if (theoperator == "-"){
    > answer = currentDspvalue - previousDspvalue
    > }
    > document.form.sup.value = answer
    > }


    It may be suitable to use a switch statement rather than ifs, but
    that's up to you.

    > // -->


    Remove this too.

    > </script>
    > <body bgcolor="blue">
    > <form name="form">


    Forms require an action attribute, even if it's empty:

    <form name="form" action="">

    I'd change the name of the form to make it more obvious that it is the
    name of a form, not just a form.

    > <input name="value1" length=15 type="text"><br>


    Inputs do not have a 'length' attribute. 'size' will set the width of
    a text input in characters, 'maxlength' will set the maximum number of
    characters the user may enter.

    > <input name="1" type="button" value="1" onClick="calculate(1)">
    > <input name="2" type="button" value="2" onClick="calculate(2)">
    > <input name="3" type="button" value="3" onClick="calculate(3)">
    > <input name="4" type="button" value="4" onClick="calculate(4)">
    > <input name="5" type="button" value="5" onClick="calculate(5)">
    > <input name="6" type="button" value="6" onClick="calculate(6)">
    > <input name="7" type="button" value="7" onClick="calculate(7)">
    > <input name="8" type="button" value="8" onClick="calculate(8)">
    > <input name="9" type="button" value="9" onClick="calculate(9)">
    > <input name="0" type="button" value="0" onClick="calculate(0)">
    > <input name="decimal" type="button" value=" . " onClick=calculate(".")>


    You must use quotes around javascript in the onclick attribute:

    <input name="decimal" type="button" value=" . "
    onClick="calculate('.')">

    The same goes for all following onclick attributes:

    > <input name="plus" type="button" value="Plus" onClick =operator("+")>
    > <input name="minus" type="button" value="minus" onClick =operator("-")>
    > <input name="multiply" type="button" value="times" onClick
    > =operator("*")>
    > <input name="divide" type="button" value="divided by" onClick
    > =operator("/")>
    > <input name="equals" type="button" value=" = " onClick = "equals()">


    Change the name of this element, say:

    <input name="signEquals" ... >

    > <input name="reset" type="reset" value="clear">
    > </form>
    > </body>
    > </html>
    >
    > It works fine until I press the equal button.


    I presume you are not using any debugging tools or you would not have
    come to that conclusion.

    A working version of your script with the above corrections applied is
    below.

    [...]

    The above fixes just get your current code to work, there is a lot more
    required before your calculator becomes a robust solution. For
    example, you do not prevent users directly entering characters into
    the text field and do not validate the input at all.

    Once a sum is complete, the first entry of the next number is appended
    to the last result - users have to clear the input manually.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <title>Calculator</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">

    var total = 0
    var theOperator = 0

    function calculate(number){
    firm = document.form.value1;
    firm.value = firm.value + number;
    }

    function operator(opvalue){
    theOperator = opvalue;
    total = document.form.value1.value;
    // document.form.sup.value = ""
    document.form.value1.value = ""
    }

    function equals(){
    // currentDspvalue = eval(document.form.value1.value);
    currentDspvalue = document.form.value1.value;
    previousDspvalue = total;

    // add
    if (theOperator == "+"){
    answer = +currentDspvalue + +previousDspvalue;
    // divide
    } else if (theOperator == "/"){
    answer = currentDspvalue / previousDspvalue
    // multiply
    } else if (theOperator == "*"){
    answer = currentDspvalue * previousDspvalue
    // subtract
    } else if (theOperator == "-"){
    answer = currentDspvalue - previousDspvalue
    }
    // document.form.sup.value = answer
    document.form.value1.value = answer;
    }
    </script>
    <body bgcolor="blue">
    <form name="form">
    <input name="value1" size="15" type="text"><br>
    <input name="1" type="button" value="1" onClick="calculate(1)">
    <input name="2" type="button" value="2" onClick="calculate(2)">
    <input name="3" type="button" value="3" onClick="calculate(3)">
    <input name="4" type="button" value="4" onClick="calculate(4)">
    <input name="5" type="button" value="5" onClick="calculate(5)">
    <input name="6" type="button" value="6" onClick="calculate(6)">
    <input name="7" type="button" value="7" onClick="calculate(7)">
    <input name="8" type="button" value="8" onClick="calculate(8)">
    <input name="9" type="button" value="9" onClick="calculate(9)">
    <input name="0" type="button" value="0" onClick="calculate(0)">
    <input name="decimal" type="button" value=" . "
    onClick="calculate('.')">
    <input name="plus" type="button" value="Plus"
    onClick="operator('+')">
    <input name="minus" type="button" value="minus"
    onClick="operator('-')">
    <input name="multiply" type="button" value="times"
    onClick="operator('*')">
    <input name="divide" type="button" value="divided by"
    onClick="operator('/')">
    <input name="signEquals" type="button" value=" = "
    onClick="equals()">
    <input name="reset" type="reset" value="clear">
    </form>
    </body>
    </html>


    --
    Rob
     
    RobG, May 11, 2005
    #2
    1. Advertising

  3. JRS: In article <J5ege.1371$>, dated Wed, 11
    May 2005 02:28:57, seen in news:comp.lang.javascript, RobG
    <> posted :
    >
    > Forms require an action attribute, even if it's empty:
    >
    > <form name="form" action="">


    Testers and validators may not like an empty action : I've settled at
    present on action="#" .

    > I'd change the name of the form to make it more obvious that it is the
    > name of a form, not just a form.


    Indeed; I'd suggest that, except for variables local to a short
    function, it's generally helpful not to use as an identifier anything
    which is reserved or predefined in javascript, or which is likely to
    occur in the rest of the page.

    Then one may use general file-handling tools such as MiniTrue without
    much risk of finding irrelevant occurrences.


    ASIDE : most of my pages are now mostly converted to the
    better code-displaying functions (Thanks, LRN).

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
    I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
    free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> Update hope?
     
    Dr John Stockton, May 11, 2005
    #3
  4. mwh

    mwh Guest

    Thank You!

    I am a very novice javascript author, I thank you alot.

    (____)
    (\/)
    /-------\/
    / | MWH ||
    - ||----||
     
    mwh, May 16, 2005
    #4
  5. mwh

    mwh Guest

    Thank You!

    I am a very novice javascript author, I thank you alot.

    (____)
    (\/)
    /-------\/
    / | MWH ||
    - ||----||
     
    mwh, May 16, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Maria Laura Re

    URGENT Help With Scientific Calculator!

    Maria Laura Re, Dec 13, 2003, in forum: Java
    Replies:
    4
    Views:
    524
    Andrew Thompson
    Dec 14, 2003
  2. Adam Pflug
    Replies:
    6
    Views:
    550
  3. Rafael

    Need help with my Calculator program.

    Rafael, Dec 2, 2003, in forum: C Programming
    Replies:
    6
    Views:
    402
    osmium
    Dec 4, 2003
  4. Protoman
    Replies:
    14
    Views:
    558
  5. Replies:
    3
    Views:
    385
    Juha Nieminen
    Sep 25, 2007
Loading...

Share This Page