www.webdeveloper.com
Results 1 to 13 of 13

Thread: SimpleCalculator

  1. #1
    Join Date
    Mar 2011
    Posts
    19

    SimpleCalculator

    Hello I am trying to make a simple calculator and don't know why my add, subtract, divide and multiply functions are not working?

    Thanks in advance....


    <!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>
    <title>Docuemnt Title</title>
    <meta name="Generator" content="EditPlus" />
    <meta name ="Author" content ="Matthew Zarrillo" />
    <meta name ="Keywords" content ="web site design" />
    <meta name ="Description" content ="" />
    <script>

    function doClear(){

    document.SimpleCalculator.fnumber.value="";
    document.SimpleCalculator.snumber.value="";
    document.SimpleCalculator.answer.value="";
    }



    function add() {
    var fnum = parseInt(document.SimpleCalulator("fnumber").value);
    var snum = parseInt(document.SimpleCalulator("snumber").value);
    var answer = fnum+snum;
    SimpleCalculator.answer.value = answer;
    }

    function subtract(){
    var fnum = parseInt(document.SimpleCalulator("fnumber").value);
    var snum = parseInt(document.SimpleCalulator("snumber").value);
    var answer = fnum/snum;
    SimpleCalculator.answer.value = answer;
    }



    function divide(){
    var fnum = parseInt(document.SimpleCalulator("fnumber").value);
    var snum = parseInt(document.SimpleCalulator("snumber").value);
    var answer = fnum/snum;
    SimpleCalculator.answer.value = answer;
    }


    function multiply(){
    var fnum = parseInt(document.SimpleCalulator("fnumber").value);
    var snum = parseInt(document.SimpleCalulator("snumber").value);
    var answer = fnum*snum;
    SimpleCalculator.answer.value = answer;
    }





    </script>
    </head>




    <body>
    <h1> Intro to Javascript</h1>
    <h1> Calculator Assignment</h1>
    <form name="SimpleCalculator" >
    First Number:<input name="fnumber" size="2"type="text">
    <br />
    <br />
    Second Number: <input name="snumber" size="2"type="text">
    <br />
    <br />
    <input type="button" value="Multiply" onClick="multiply()"/>
    <input type="button" value="Divide" onClick="divide()"/>
    <input type="button" value="Add" onClick="add()"/>
    <input type="button" value="Subtract" onClick="subtract()"/>
    <br />
    <br />
    Answer:<input name="answer" size="2"type="text">
    <br />
    <br />
    <input type="button" value="Clear" onClick="doClear()"/>

    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Something to try ...

    Numerous syntax errors. Use the error console to see them.
    Specifically, you need to spell 'Calculator' the same way where ever you use it.
    parseInt() function is OK, but faster just to multiply by 1 to convert string to a number.
    document. prefix in front of all form references.

    That's probably enough for now.
    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>
    <title>Docuemnt Title</title>
    <meta name="Generator" content="EditPlus" />
    <meta name ="Author" content ="Matthew Zarrillo" />
    <meta name ="Keywords" content ="web site design" />
    <meta name ="Description" content ="" />
    <script>
    
    function doClear(){
      document.SimpleCalculator.fnumber.value="";
      document.SimpleCalculator.snumber.value="";
      document.SimpleCalculator.answer.value="";
    }
    
    function add() {
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum+snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function subtract(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum-snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function divide(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum/snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function multiply(){
    var fnum = document.SimpleCalculator.fnumber.value*1;
    var snum = document.SimpleCalculator.snumber.value*1;
    var answer = fnum*snum;
    document.SimpleCalculator.answer.value = answer;
    }
    
    </script>
    </head>
    
    <body>
    <h1> Intro to Javascript</h1>
    <h1> Calculator Assignment</h1>
    <form name="SimpleCalculator" onsubmit="return false">
    First Number:<input name="fnumber" size="2"type="text">
    <br />
    <br />
    Second Number: <input name="snumber" size="2"type="text">
    <br />
    <br />
    <input type="button" value="Multiply" onClick="multiply()"/>
    <input type="button" value="Divide" onClick="divide()"/>
    <input type="button" value="Add" onClick="add()"/>
    <input type="button" value="Subtract" onClick="subtract()"/>
    <br />
    <br />
    Answer:<input name="answer" size="6" type="text">
    <br />
    <br />
    <input type="button" value="Clear" onClick="doClear()"/>
    
    </body>
    </html>

  3. #3
    Join Date
    Mar 2011
    Posts
    19

    Thanks how about this

    Thanks for your help, it was a silly typo... How could you go about adding this function to my calculator ...
    When the user first comes to the page the calculator is
    invisible, and only an alert message is displayed. When the user clicks the message, the calculator is displayed.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    1. Surround your calculator display with the <div id="calculatorDisplay">...</div> tags
    2. Use a toggle function or show_hide function to change the CSS style from 'none' to 'block'
    3. Use some CSS style tags to initialize the #calculatorDisplay to display='none';

    Should be fairly easy to do.

  5. #5
    Join Date
    Mar 2011
    Posts
    19

    hmmm??

    Could you maybe show me an example?

    Thanks

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Arrow

    Quote Originally Posted by mattzarr View Post
    Could you maybe show me an example?

    Thanks
    You could at least make an attempt based on the information given.

    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>
    <title>Docuemnt Title</title>
    <meta name="Generator" content="EditPlus" />
    <meta name ="Author" content ="Matthew Zarrillo" />
    <meta name ="Keywords" content ="web site design" />
    <meta name ="Description" content ="" />
    <script>
    
    function doClear(){
      document.SimpleCalculator.fnumber.value="";
      document.SimpleCalculator.snumber.value="";
      document.SimpleCalculator.answer.value="";
    }
    
    function add() {
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum+snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function subtract(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum-snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function divide(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum/snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function multiply(){
    var fnum = document.SimpleCalculator.fnumber.value*1;
    var snum = document.SimpleCalculator.snumber.value*1;
    var answer = fnum*snum;
    document.SimpleCalculator.answer.value = answer;
    }
    
    </script>
    <style type="text/css">
    #calculatorDisplay { display : none; }
    </style>
    </head>
    
    <body>
    <h1> Intro to Javascript</h1>
    <h1>
     <button onclick="document.getElementById('calculatorDisplay').style.display='block'">Calculator Assignment</button>
    </h1>
    <form name="SimpleCalculator" onsubmit="return false">
    
    <div id="calculatorDisplay">
    First Number:<input name="fnumber" size="2"type="text">
    <br />
    <br />
    Second Number: <input name="snumber" size="2"type="text">
    <br />
    <br />
    <input type="button" value="Multiply" onClick="multiply()"/>
    <input type="button" value="Divide" onClick="divide()"/>
    <input type="button" value="Add" onClick="add()"/>
    <input type="button" value="Subtract" onClick="subtract()"/>
    <br />
    <br />
    Answer:<input name="answer" size="6" type="text">
    <br />
    <br />
    <input type="button" value="Clear" onClick="doClear()"/>
    </div>
    
    </form>
    </body>
    </html>

  7. #7
    Join Date
    Mar 2011
    Posts
    19

    Okay..

    But how about having an alert box popup and then have the calculator show instead of having the button trigger the calculator

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Arrow

    Again ...
    Quote Originally Posted by JMRKER View Post
    You could at least make an attempt based on the information given.

  9. #9
    Join Date
    Mar 2011
    Posts
    19

    okay ..

    Okay then let me ask you this.

    If i create an alert message in a function and then have it show the calculator, how would you call the function without using a button.???

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    <body onload="xxx()">
    or possibly
    <body onload="alert('Get ready for my Calculator Display')">

    My turn to ask a question. What tutorial or class are you learning from?

  11. #11
    Join Date
    Mar 2011
    Posts
    19

    okay ..

    Well I am new to the java script

    function display(){

    alert("Get ready for my calculator");

    }


    #calculatorDisplay

    { display : none; }

    <body onload="display()">

    I have done this now and got stuck again

    i need the function to change the display property from none to block..
    could you suggest anything ??
    Thanks again !!!

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb

    Well, you finally made an attempt.

    Consider this...
    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>
    <title>Docuemnt Title</title>
    <meta name="Generator" content="EditPlus" />
    <meta name ="Author" content ="Matthew Zarrillo" />
    <meta name ="Keywords" content ="web site design" />
    <meta name ="Description" content ="" />
    <script>
    
    function doClear(){
      document.SimpleCalculator.fnumber.value="";
      document.SimpleCalculator.snumber.value="";
      document.SimpleCalculator.answer.value="";
    }
    
    function add() {
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum+snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function subtract(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum-snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function divide(){
      var fnum = document.SimpleCalculator.fnumber.value*1;
      var snum = document.SimpleCalculator.snumber.value*1;
      var answer = fnum/snum;
      document.SimpleCalculator.answer.value = answer;
    }
    
    function multiply(){
    var fnum = document.SimpleCalculator.fnumber.value*1;
    var snum = document.SimpleCalculator.snumber.value*1;
    var answer = fnum*snum;
    document.SimpleCalculator.answer.value = answer;
    }
    
    function initializeCalculator() {
      alert('You are about to see my Calculator Assignment');
      document.getElementById('calculatorDisplay').style.display = 'block';
    }
    
    </script>
    <style type="text/css">
    #calculatorDisplay { display : none; }
    </style>
    </head>
    
    <body onload="initializeCalculator()">
    <h1> Intro to Javascript</h1>
    <h1> Calculator Assignment </h1>
    <!-- <button onclick="document.getElementById('calculatorDisplay').style.display='block'">Calculator Assignment</button> -->
    <form name="SimpleCalculator" onsubmit="return false">
    
    <div id="calculatorDisplay">
    First Number:<input name="fnumber" size="2"type="text">
    <br />
    <br />
    Second Number: <input name="snumber" size="2"type="text">
    <br />
    <br />
    <input type="button" value="Multiply" onClick="multiply()"/>
    <input type="button" value="Divide" onClick="divide()"/>
    <input type="button" value="Add" onClick="add()"/>
    <input type="button" value="Subtract" onClick="subtract()"/>
    <br />
    <br />
    Answer:<input name="answer" size="6" type="text">
    <br />
    <br />
    <input type="button" value="Clear" onClick="doClear()"/>
    </div>
    
    </form>
    </body>
    </html>

  13. #13
    Join Date
    Mar 2011
    Posts
    19
    Thanks !!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles