CODEWITHSUNDEEP
javascript
user3608074
user3608074

Reputation:

Simple calc in javascript not woriking as it should

I made some simple functions in javaScript. But when I print the result I get the correct results for multiplication and division but not addition and subtraction.

Why is that, the functions are almost identitcal.

            <script type="text/javascript">
            function multiplyBy()
            {
                num1 = document.getElementById("firstNumber").value;
                num2 = document.getElementById("secondNumber").value;
                document.getElementById("result").innerHTML = num1 * num2;
            }

            function divideBy() 
            { 
                num1 = document.getElementById("firstNumber").value;
                num2 = document.getElementById("secondNumber").value;
                document.getElementById("result").innerHTML = num1 / num2;
            }

            function addition() {
                num1 = document.getElementById("firstNumber").value;
                num2 = document.getElementById("firstNumber").value;
                document.getElementById("result").innerHTML = num1 + num2;
            }

            function subtract() {
                num1 = document.getElementById("firstNumber").value;
                num2 = document.getElementById("firstNumber").value;
                document.getElementById("result").innerHTML = num1 - num2;
            }
            </script>

<body>
<form>
            <p>1st Number: <input type="text" id="firstNumber" /><br></p>
            <p>2nd Number: <input type="text" id="secondNumber" /><br></p>
            <input type="button" class="btn btn-success" onClick="multiplyBy()" Value="Multiply" />
            <input type="button" class="btn btn-warning" onClick="divideBy()" Value="Divide" />
            <input type="button" class="btn btn-danger" onClick="addition()" Value="Add" />
            <input type="button" class="btn btn-primary" onClick="subtract()" Value="Subtract" />
        </form>
        <br/>
        <p>The Result is : <br/>
            <span id = "result"></span>
        </p>
</body>

Upvotes: 0

Views: 114

Answers (2)

john Smith
john Smith

Reputation: 17906

change 

        function addition() {
            num1 = document.getElementById("firstNumber").value;
            num2 = document.getElementById("firstNumber").value;
            document.getElementById("result").innerHTML = num1 + num2;
        }

        function subtract() {
            num1 = document.getElementById("firstNumber").value;
            num2 = document.getElementById("firstNumber").value;
            document.getElementById("result").innerHTML = num1 - num2;
        }

to

        function addition() {
            num1 = parseInt(document.getElementById("firstNumber").value);
            num2 = parseInt(document.getElementById("secondNumber").value);
            document.getElementById("result").innerHTML = (num1 + num2);
        }

        function subtract() {
            num1 = parseInt(document.getElementById("firstNumber").value);
            num2 = parseInt(document.getElementById("secondNumber").value);
            document.getElementById("result").innerHTML = (num1 - num2);
        }

three things, parse input as number, use the correct id for num2 and do calculation in brackets to be safe

Upvotes: 2

DvS
DvS

Reputation: 1095

You have a typo in your addition/subtraction functions. You're getting 'firstNumber' in both! Oh the little things... ;-)

And you might also try the parseInt(), parseFloat() functions mentioned in a previous comment to ensure you are dealing with the correct data type.

Upvotes: 1

Related Questions