Html Question posted in
Some basic documentation can be found here.

Alert box not displaying Sum with Html Input Fields

New to website programming. I’m trying to make a basic sum equation with 2 input fields taken from client-side.

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <form>
            <input type="number" id="x">
            <input type="number" id="y">
        <script>
            let x = document.getElementById('x').nodeValue;
            let y = document.getElementById('y').nodeValue;

            function sum(x, y) {
                let sum = x + y;
                alert(sum);
            }
        </script>
        <input type="submit" value="submit" onclick="sum(x, y)">
    </form>
    </body>
</html>

I run my code in a browser(Opera Gx if that matters) and when I choose two numbers, then hit submit, it shows the alertbox. What shows up however is:

"[object HTMLInputElement][object HTMLInputElement]"

I know that the input elements are being used, but I obviously want my sum function to return a sum of the 2 input fields.

I don’t understand what I’m doing wrong.

Tags:

3

Answers


  1. 0

    The issue in your code is related to how you’re retrieving the values of the input fields. You’re using the nodeValue property, which is not the correct way to get the values of input elements. For what nodeValue returns check out docs.

    Instead, you should use the value property to retrieve the values of input elements. Here’s the corrected code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sum Calculator</title>
</head>
<body>
    <form>
        <input type="number" id="x">
        <input type="number" id="y">
        <input type="submit" value="Submit" onclick="sum()">
    </form>

    <script>
        function sum() {
            // Retrieve the values of the input fields and try to parse them
            let x = parseFloat(document.getElementById('x').value);
            let y = parseFloat(document.getElementById('y').value);

            // Check if the input values are valid numbers
            if (!isNaN(x) && !isNaN(y)) {
                // Perform the sum
                let result = x + y;
                alert("The sum is: " + result);
            } else {
                alert("Please enter valid numbers in both fields.");
            }
        }
    </script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    You should check the values of your inputs fields when the function is being called (and not once when the script is running like you have now, because you will get the wrong value).

    To do so you can use the .value property instead of using the nodeValue on the elements like this:

    </head>
<body>
    <form>
        <input type="number" id="x">
        <input type="number" id="y">
    <script>
        let x = document.getElementById('x');
        let y = document.getElementById('y');

        function sum(x, y) {
            let sum = x.value + y.value;
            alert(sum);
        }
    </script>
    <input type="submit" value="submit" onclick="sum(x, y)">
</form>
</body>

    This way x and y are referring to the elements and you can extract the values when you want to.

    NOTICE – This will give you the wrong result, and this is because .value will return a string.
    You will also need to parse the values into numbers while summing:

    </head>
<body>
    <form>
        <input type="number" id="x">
        <input type="number" id="y">
    <script>
        let x = document.getElementById('x');
        let y = document.getElementById('y');

        function sum(x, y) {
            let sum = parseFloat(x.value) + parseFloat(y.value);
            alert(sum);
        }
    </script>
    <input type="submit" value="submit" onclick="sum(x, y)">
</form>
</body>
    Login or Signup to reply.
  3. 0

    You also don’t need to add parameters in your function

    <form>
    <input type="number" id="x"/>
    <input type="number" id="y"/>
    <input type="submit" value="submit" onclick="sum()">
    <script>
        function sum() {
            let x = parseFloat(document.getElementById('x').value)
            let y = parseFloat(document.getElementById('y').value)
            let theSum = x + y;
            alert(theSum)
        }
    </script>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search