I have this extremely simple code for adding 2 numbers with JS and just showing the result to the console but it's not working. I tried all day to figure out what's wrong but I really don't know...

<!DOCTYPE html>
<html>

<head>
    <title>Failure</title>
</head>

<body>
    <label for="value1">Value1</label>
    <input type="number" id="value1" />
    <label for="value2">Value2</label>
    <input type="number" id="value2" />
    <button id="btn">Submit</button>
    <hr>
    <h2>Result</h2>
    <p id="result"></p>

    <script>
        let a = document.getElementById("value1").value;
        let b = document.getElementById("value2").value;
        let result = document.getElementById("result");
        let button = document.getElementById("btn");
        function summing() {
            let sum = a   b;
            console.log(sum);
        }
        button.addEventListener("click", summing);
    </script>
</body>

</html>

CodePudding user response：

You need to call .value inside the listener function, as a and b do not change when the input value changes.

This is because the .value gets the value at the instant the line is run; but because it is outside the callback, it is run once, on page load, when the inputs are empty.

Also you need to parseInt the value, as it returns a string, even for number inputs.

<!DOCTYPE html>
<html>

<head>
    <title>Failure</title>
</head>

<body>
    <label for="value1">Value1</label>
    <input type="number" id="value1" />
    <label for="value2">Value2</label>
    <input type="number" id="value2" />
    <button id="btn">Submit</button>
    <hr>
    <h2>Result</h2>
    <p id="result"></p>

    <script>
        let a = document.getElementById("value1");
        let b = document.getElementById("value2");
        let result = document.getElementById("result");
        let button = document.getElementById("btn");
        function summing() {
            let sum = parseInt(a.value)   parseInt(b.value);
            console.log(sum);
        }
        button.addEventListener("click", summing);
    </script>
</body>

</html>

CodePudding user response：

You have to get the values of the inputs inside the summing function and convert them to integers.

<!DOCTYPE html>
<html>

<head>
    <title>Failure</title>
</head>

<body>
    <label for="value1">Value1</label>
    <input type="number" id="value1" />
    <label for="value2">Value2</label>
    <input type="number" id="value2" />
    <button id="btn">Submit</button>
    <hr>
    <h2>Result</h2>
    <p id="result"></p>

    <script>
        let result = document.getElementById("result");
        let button = document.getElementById("btn");
        function summing() {
            let a = parseInt(document.getElementById("value1").value);
            let b = parseInt(document.getElementById("value2").value);
            let sum = a   b;
            console.log(sum);
            document.getElementById("result").textContent = sum;
        }
        button.addEventListener("click", summing);
    </script>
</body>

</html>

CodePudding user response：

a and b are and empty string, because the value of the input is an empty string when the document is loaded. And it doesn't update. You have to either declare those variables inside the callback function of the eventListener or get the values inside the callback function. You will also need to parse those values to an Integer. use parseInt()

CodePudding user response：

<!DOCTYPE html>
<html>

<head>
    <title>Failure</title>
</head>

<body>
    <label for="value1">Value1</label>
    <input type="number" id="value1" />
    <label for="value2">Value2</label>
    <input type="number" id="value2" />
    <button id="btn">Submit</button>
    <hr>
    <h2>Result</h2>
    <p id="result"></p>

    <script>
        // Here a is null or empty string like ('')
        let a = document.getElementById("value1").value;

        // Also b is null or empty string like ('')
        let b = document.getElementById("value2").value;

        let result = document.getElementById("result");
        let button = document.getElementById("btn");
        function summing() {
            // You are summing two empty string here even if you put anything into inputs.
            let sum = a   b;

            console.log(sum);
        }
        button.addEventListener("click", summing);
    </script>
</body>

</html>

Maybe helps:

Try to get the value of input or any other HTML element within the event because JS does not detect the change or new data input in real-time.
Better to use events like keypress or keyup to get input data in real-time.

Everything you need about events

CodePudding user response：

You can avoid 'parseInt' function by simply doing this trick:

function summing() {
    let a = document.getElementById("value1").value;
    let b = document.getElementById("value2").value;
    let sum = a*1   b*1; // no need for parseInt :)
    console.log(sum); //do anything you like with sum :))
}

So, when you multiply for ex. string 5 by integer 1 ('5'*1 = 5) you get integer 5.