Because when I click the button, you don’t calculate?

Asked

Viewed 71 times

0

I’m making a simple calculator with Javacript and when I type the values in input they are grouped and not summed up what I am doing wrong? follows the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text">
    <button type="text">calcular</button>
    <p></p>
    <script>
    
        var input1 = window.document.querySelectorAll("input")[0];
        var input2 = window.document.querySelectorAll("input")[1];
        var button = window.document.querySelector("button");
    
        button.addEventListener("click", function() {
            window.document.querySelector("p").textContent = input1.value + input2.value;
        });

    </script>
</body>
</html>

javascript

3 answers

4


You’re not doing anything wrong the problem is logic, because what comes from a input is text is string and not number number, then what you have to do is simply convert the value that comes from the input that is string for number.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text">
    <button type="text">calcular</button>
    <p></p>
    <script>
    
        var input1 = window.document.querySelectorAll("input")[0];
        var input2 = window.document.querySelectorAll("input")[1];
        var button = window.document.querySelector("button");
    
        button.addEventListener("click", function() {
            window.document.querySelector("p").textContent = Number(input1.value) + Number(input2.value);
        });

    </script>
</body>
</html>

1

This is happening because input1.value and input2.value are strings, so what you’re doing is adding two strings.

To solve this problem, it is necessary to convert the value for number. So:

window.document.querySelector("p").textContent = Number(input1.value) + Number(input2.value);

1

All that was missing was to convert the input values to numeric. Note that the input is as type "text", even if you use the type "number" Javascript will still read as text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text">
    <button type="text">calcular</button>
    <p></p>
    <script>
    
        var input1 = window.document.querySelectorAll("input")[0];
        var input2 = window.document.querySelectorAll("input")[1];
        var button = window.document.querySelector("button");
    
        button.addEventListener("click", function() {
            window.document.querySelector("p").textContent = Number(input1.value) + Number(input2.value);
        });

    </script>
</body>
</html>

Example with type "number"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="number">
    <input type="number">
    <button type="text">calcular</button>
    <p></p>
    <script>
    
        var input1 = window.document.querySelectorAll("input")[0];
        var input2 = window.document.querySelectorAll("input")[1];
        var button = window.document.querySelector("button");
    
        button.addEventListener("click", function() {
            window.document.querySelector("p").textContent = input1.value + input2.value;
        });

    </script>
</body>
</html>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.