0

Hey guys, I just started learning HTML/Javascript yesterday and I just wanted to mess around a bit. I'm working on a few things dealing with user input but I've come accross a little snag. I want it to take in 3 inputs, do an operation, and then output the answer. Equation: (x + y) / z = a. To test it, I input the same number for x, y, and z because that's supposed to give me a = 2. The problem is, it doesn't. Depending on the number input for all three variables, the output changes.(e.g. x,y,z = 10 a = 101; x,y,z = 2 a = 11) I've no idea what's wrong, but it's probably some stupid mistake on my part.

Here's the code:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <form name="TESTING">
        <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">
            <tr>
                <th colspan="2">
                    <h1>TESTING</h1>
                </th> 
                <td>
                    <input type="number" name="lev" id="input1" onchange="calculate()"/>
                    <input type="number" name="AT" id="input2" onchange="calculate()"/>
                    <input type="number" name="DE" id="input3" onchange="calculate()"/>
                </td>
                <td>
                    <td>
                        <input type="number" name="ANS" id="output">
                    </td>
                </td>
            </tr>
        </table>
    </form>
<script>
    function calculate() {
        var USERINPUT1 = document.TESTING.Lev.value,
            USERINPUT2 = document.TESTING.AT.value,
            USERINPUT3 = document.TESTING.DE.value,
            RESULT = (USERINPUT2 + USERINPUT3) / USERINPUT1;
        document.TESTING.ANS.value = RESULT;
    }
</script>
</body>
</html>
4
Contributors
3
Replies
23
Views
4 Years
Discussion Span
Last Post by stbuchok
0

it's good that you started to learn, but you need to learn some basics first and then proceed to coding.
The mistake you committed in coding is as follows.

For USERINTPUT1=10, USERINTPUT2=10, USERINTPUT3=10

RESULT=(10+10)/10

Here (10+10) gives you 1010 as it concatinates 10 and 10 assuming it to be string.
Note:- Javascript variables are loosely bounded. You need not specify datatype but you need to take care while calculations to convert them from string to integer and float.

Hence RESULT=1010/10 , RESULT=101.0

Change to int type to get desired result.

function calculate() {
        var USERINPUT1 = parseInt(document.getElementById("input1").value),
            USERINPUT2 = parseInt(document.getElementById("input2").value),
            USERINPUT3 = parseInt(document.getElementById("input3").value);
         var   RESULT = parseInt((USERINPUT2 + USERINPUT3) / USERINPUT1);
        document.TESTING.ANS.value = RESULT;
    }
1

If it is int, there will be no decimal places.

function calculate() {
        var USERINPUT1 = +document.getElementById("input1").value,
            USERINPUT2 = +document.getElementById("input2").value,
            USERINPUT3 = +document.getElementById("input3").value;
         var   RESULT = (USERINPUT2 + USERINPUT3) / USERINPUT1;
        document.TESTING.ANS.value = RESULT;
    }

The + at the beginning of document will make javascript infer that the value is a number

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.