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>
  • 3 Contributors
  • 6 Replies
  • 246 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by Zagga
Member Avatar for stevelg

Very interesting, not done javascript yet, next chapter!

Note that the vatiable name in line 31 is shown as a different colour, (like it has been recognised as a keyword,) but not in line 15. Also noted that line 15 has lev all in lower case, line 31 has it capitalised!! Simple mistake!

commented: Well spotted, for someone that hasn't looked at Javascript yet +5
Member Avatar for Zagga

As stevelg mentioned, you are mixing case with your variables/values. JavaScript is case sensitive.
There are various conventions for naming variables and it doesn't matter which one you use, as long as you are consistent.
A couple of the more common conventions are camelCaseVariables or hyphen_split_variables.

Edited by Zagga
Member Avatar for Sci3nc3F1cti0n

I'm sorry, but that's not the problem :/ I just checked my code in the file, and everything matched perfectly. I seem to have made an error typing it into the forum(should have just ^c and ^v). Any other help would be greatly appreciated.

-It won't let me edit the original post to fix that error :/

Edited by Sci3nc3F1cti0n
Member Avatar for Zagga

Hi again,

Sorry, I didn't actually look any further into the code.

You are doing arithmetic calculations on strings that have not specifically been declared as numeric, so they are being treated as text strings. To force a string to be treated as numeric, add a + before it.

RESULT = (+USERINPUT2 + +USERINPUT3) / +USERINPUT1;
Member Avatar for Sci3nc3F1cti0n

Thank you so much!! I didn't know that :/ I should probably read more.

Member Avatar for Zagga

No problem. I started learning about javascript fairly recently too.

As a side note, try changing onchange to unkeyup. This is something I learned very recently, here on Daniweb.

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.