Alert box not displaying Sum with Html Input Fields

Question

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.

Tamir Abutbul · Accepted Answer · 2024-02-10 18:13:56Z

1

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>

answered Feb 10, 2024 at 18:13

Tamir Abutbul

7,6518 gold badges27 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shuumi Over a year ago

For some reason, "value" doesn't show up in autotab in vscode imgur.com/a/0DG2Ynx This is why I went with nodeValue. Do you know how to get it to show up? or if it would work without autotab functionality?

Tamir Abutbul Over a year ago

Check this

Shuumi Over a year ago

Thanks for the reference. Good to know .value still works even if it's not listed.

Mehdi · Accepted Answer · 2024-02-10 18:44:57Z

1

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>

answered Feb 10, 2024 at 18:44

Mehdi

1,7972 gold badges7 silver badges19 bronze badges

9 Comments

Mehdi Over a year ago

if you keep your let x and let y outside of the function the value will be NaN. You should get the value of x and y when you call the function onclick after filling the input (and not when the code runs with no input value: NaN). Try giving a value to your inputs (value"3" and value="6") and you will see and understand what I mean.

Mehdi Over a year ago

Here it is not really a question of local scope and global scope. if you keep let x and let y outside of the function x and y are read when the code runs and when there is no value in inputs so value is NaN. You should get the value x and y when you fill the input so when you click the submit button and call the sum function you get the values in input. Hope my english explanation is clear ..And this is very important to understand in javascript

Shuumi Over a year ago

Trust me, I've been trying. Still waiting on 15 rep 😅

Mehdi Over a year ago

Loool 🤣🤣 I forgot about that, Hope you got it now 😊

Mehdi Over a year ago

You very welcome. Pls feel free to ask for any help if we can

|

Collectives™ on Stack Overflow

Alert box not displaying Sum with Html Input Fields

2 Answers 2

3 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related