Alert box not displaying Sum with Html Input Fields

Question

Alert box not displaying Sum with Html Input Fields

84 Views Asked by Shuumi At 10 February 2024 at 18:08

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.

Original Q&A

There are 3 best solutions below

Tamir Abutbul On 10 February 2024 at 18:13

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>

Mehdi On 10 February 2024 at 18:44

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>

**Milos Stojanovic** · Accepted Answer · 2024-02-10T18:12:31.520000

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>

Alert box not displaying Sum with Html Input Fields

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in INPUT

Related Questions in ALERT

Related Questions in HTML-INPUT

Trending Questions

Popular # Hahtags

Popular Questions