Member Avatar for Sci3nc3F1cti0n

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
  • 287 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for Rahul47

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;
    }
Member Avatar for stbuchok

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.