Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By sasha_bolcina

Thread: JavaScript Calculator Assignment need help finishing the code

  1. #1
    Member
    Join Date
    Aug 2014
    Posts
    88
    Member #
    40011
    Liked
    2 times

    JavaScript Calculator Assignment need help finishing the code

    HTML Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculator</title>
    </head>
    
    <body>
    
    <p>Calculator</p>
    
    <input id="Calculator" type="text" /> <br>
    
    <br>
    
    <button type="button" onclick="plus()">+</button> 
    
    <button type="button" onclick="minus()">-</button>
    
    <button type="button" onclick="multiply()">x</button>
     
    <button type="button" onclick="divide()"></button>
    
    <button type="button" onclick="Display0()">0</button>
    
    <button type="button" onclick="Display1()">1</button> 
    
    <button type="button" onclick="Display2()">2</button> 
    
    <button type="button" onclick="Display3()">3</button>
    
    <button type="button" onclick="Display4()">4</button>
    
    <button type="button" onclick="Display5()">5</button>
     
    <button type="button" onclick="Display6()">6</button>
     
    <button type="button" onclick="Display7()">7</button>
    
    <button type="button" onclick="Display8()">8</button>
    
    <button type="button" onclick="Display9()">9</button>
     
    <button type="button" onclick="CE()">CE</button>
    
    <button type="button" onclick="c()">C</button>
    
    <button type="button" onclick="Space()">Space</button>
    
    <button type="button" onclick="Odd()">Odd</button>
     
    <button type="button" onclick="Even()">Even</button>
    
    <button type="button" onclick="Min()">Min</button>
    
    <button type="button" onclick="Max()">Max</button>
    
    <button type="button" onclick="Avg()">Avg</button>
    
    <button type="button" onclick="Circle()">Circle</button>
    
    <button type="button" onclick="Rect()">Rect</button>
    
    <button type="button" onclick="Square()">Square</button>
    
    <button type="button" onclick="equals()">=</button>
    
    
    
    <script>
    
    function Number0() { 
    
        document.getElementById("Calculator").value=0;
    
    }
     
    function Number1() { 
    
        document.getElementById("Calculator").value=1;
    
    } 
    
    function Number2() { 
    
        document.getElementById("Calculator").value=2;
    
    } 
    
    function Number3() { 
    
        document.getElementById("Calculator").value=3;
    
    } 
    
    function Number4() { 
    
        document.getElementById("Calculator").value=4;
    
    } 
    
    function Number5() { 
    
        document.getElementById("Calculator").value=5;
    
    }
    
    function Number6() { 
    
        document.getElementById("Calculator").value=6;
    
    }
    
    
    function Number7() { 
    
        document.getElementById("Calculator").value=7;
    
    } 
    
    function Number8() { 
    
        document.getElementById("Calculator").value=8;
    
    } 
    
    function Number9() { 
    
        document.getElementById("Calculator").value=9;
    
    }
    
    
    // Holds the first number entered in the calculator screen
    var num1;
    
    // Holds the second number entered in the calculator screen
    var num2;
    
    // Holds the chosen operator
    var op="";
    
    function Display0 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "0"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display1 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "1"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display2 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "2"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display3 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "3"; 
    document.getElementById("Calculator").value = current;
    
    } 
    
    
    function Display4 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "4"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display5 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "5"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display6 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "6"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display7 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "7"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    function Display8 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "8"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    
    function Display9 () { 
    current = document.getElementById("Calculator").value; 
    current = current + "9"; 
    document.getElementById("Calculator").value = current;
    
    }
    
    
    function c () {
        num1 = document.getElementById("Calculator").value;
        num1 = parseInt (num1);
        op = "";
    }
    
    // this clears 
    function clear (){
        
    }
    
    
    function plus() {
        num1 = document.getElementById("Calculator").value;
        num1 = parseInt (num1);
        op = "plus";
    }
    
    // takes two numbers and adds them up
    function add (x, y){
        return (x+y);
    }
    
    function multiply() {
        num1 = document.getElementById("Calculator").value;
        num1 = parseInt (num1);
        op = "multiply";
    }
    
    // takes two numbers and multiplies them 
    function multi (x, y){
        return (x*y);
    } 
    
    
    function minus() {
        num1 = document.getElementById("Calculator").value;
        num1 = parseInt (num1);
        op = "minus";
    }
    
    // takes two numbers and minuses them 
    function sub (x, y){
        return (x-y);
    } 
    
    
    function divide() {
        num1 = document.getElementById("Calculator").value;
        num1 = parseInt (num1);
        op = "divide";
    }
    
    // takes two numbers and divide them 
    function divideIt (x, y){
        return (x/y);
    }
    
    function equals () {
        // get the current number from the textbox
        num2 = document.getElementById("Calculator").value;
        num2 = parseInt (num2);
        
        // find which operation has been selected and apply it
        switch (op) {
            case "plus":
                res = add (num1, num2);
                break;
            case "multiply":
                res = multi (num1, num2);
                break;
            case "minus":
                res = sub (num1, num2);
                break;
                
            case "divide":
                res = divideIt (num1, num2);
                break;
                
                case "c":
                res = clear (num1, num2);
                break;
            default:
                res = 0;
                break;
        }
        
        // display the result
        document.getElementById("Calculator").value = res;
        
        //reset the operation and the numbers
        op="";    
        num1=0;
        num2=0;
    }
    
    </script>
    
    
    </body>
    </html>
    Last edited by Ronald Roe; Oct 16th, 2014 at 05:10 AM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    And what exactly do you need help with?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Aug 2014
    Posts
    88
    Member #
    40011
    Liked
    2 times
    To fix my clear script code cause there's something wrong with it and it does not work and create the code for these ones on the calculator CE,Square,Rect,Circle,Avg,Min,Max,Even,Odd,Space script cause I have no idea how to write it out I used Google to look at scripts and there very different then what I'm learning and what I have above in code I looked at w3schools & YouTube and still can't find my answer I pulled up my calculator on my Desktop still can't find anything I'm really really stuck and need help to finish this assignment.

  5. #4
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    For beginning I make your code a little bit more readable.
    I did it for simple operations. For the others you have to describe what and how (not formula, just how you imagine, let say, space to be calculated. To enter floor square feet and height, or... what?).
    There is rearranged code:
    Code:
    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculator</title>
    </head>
    
    <body>
    
    <p>Calculator</p>
    
    <input id="Calculator" type="text" /> <br>
    
    <br>
    <div class="calculator">
        <div class="row">
            <button type="button" onclick="setOperation('plus')">+</button> 
            <button type="button" onclick="setOperation('minus')">-</button>
            <button type="button" onclick="setOperation('multiply')">x</button>
            <button type="button" onclick="setOperation('divide')"></button>
        </div>
        <div class="row">
            <button type="button" onclick="display(0)">0</button>
            <button type="button" onclick="display(1)">1</button>
            <button type="button" onclick="display(2)">2</button>
         </div>    
        <div class="row">
            <button type="button" onclick="display(3)">3</button>
            <button type="button" onclick="display(4)">4</button>
            <button type="button" onclick="display(5)">5</button>
         </div>    
        <div class="row">
            <button type="button" onclick="display(6)">6</button>
            <button type="button" onclick="display(7)">7</button>
            <button type="button" onclick="display(8)">8</button>
         </div>    
        <div class="row">
        <button type="button" onclick="display(9)">9</button>
        </div>    
        <div class="row">
            <button type="button" onclick="reset()">CE</button>
            <button type="button" onclick="clearLastOperand()">C</button>
            <button type="button" onclick="Space()">Space</button>
            <button type="button" onclick="Odd()">Odd</button>
        </div>    
        <div class="row">
            <button type="button" onclick="Even()">Even</button>
            <button type="button" onclick="Min()">Min</button>
            <button type="button" onclick="Max()">Max</button>
            <button type="button" onclick="Avg()">Avg</button>
        </div>    
        <div class="row">
            <button type="button" onclick="Circle()">Circle</button>
            <button type="button" onclick="Rect()">Rect</button>
            <button type="button" onclick="Square()">Square</button>
            <button type="button" onclick="calculate()">=</button>
        </div> 
    </div>
    
    
    
    <script>
        /**
         * num1 is left operand, num2 is right operand.
         * After setting an operation (+, -...), operand will be set to 'right' (num2)
         */  
        var operand = 'left';
        var clearInput = false;
        // Holds the first number entered in the calculator screen
        var num1;
        // Holds the second number entered in the calculator screen
        var num2;
        // Holds the chosen operator
        var op="";
        /**
         * get calculator text input value
         * @returns {Element.value}
         */
        function getInput(){
            return document.getElementById("Calculator").value;
        }
        /**
         * set calculator text input value
         * @param {string} value 
         */
        function setInput(value){
            document.getElementById("Calculator").value = value;
        }
        /**
         * set operands value depends of operand position
         * @param value {string} operand value
         */
        function setOperand(value){
            if(operand === 'left'){
                num1 = value;
            }else{
                num2 = value;
            } 
        }
        function setOperation(value){
            op = value;
            setOperand(getInput());
            operand = 'right';             
            clearInput = true;
        }
        /**
         * set input text value per clicked button value
         * @param {string} inputNum - button value
         */
        function display(inputNum){
            if(clearInput){
                setInput('');
                clearInput = false;
            }
            current = document.getElementById("Calculator").value; 
            current = current + "" + inputNum; 
            document.getElementById("Calculator").value = current;
        }
        /**
         * clear last operand (left or right if set
         * clear input
         */
        function clearLastOperand() {
            setOperand('');
            setInput('');
        }
        /**
         * clear all
         */
        function reset(){
            operand = 'left';
            num1 = '';
            num2 = '';
            op = '';
            setInput('');
        }
        /**
         * calculate
         */
        function calculate(){
            setOperand(getInput());            
            clearInput = true;
            operand = 'left'; // prepare for new input
            var result = 0;
            try{
                num1 = parseFloat(num1);
                num2 = parseFloat(num2);
            }
            catch(err){
                reset();
                result = '';
                alert(err.message);
                return false;
            }
            // check operation
            if(op){
                switch(op){
                    case 'plus':
                        result = num1 + num2;
                        break;
                    case 'minus':
                        result = num1 - num2;
                        break;
                    case 'multiply':
                        result = num1 * num2;
                        break;
                    case 'divide':
                        result = num1 / num2;
                        break;
                    default:
                        result = 0;
                        break;
                }
            }else{
                alert('Error! Missing parameter. Try again.');
                result = 0;
            }
            reset();
            setInput(result);
        }
    </script>
    </body>
    </html>
    Take care! It is not tested! Test and debug!
    James92 likes this.


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 09:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com