0

Estou fazendo uma calculadora simples com Javacript e quando eu digito os valores nos input ele são agrupados e não somados o que estou fazendo de errado? segue o código.

<!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>

3 Respostas 3

4

Você não tá fazendo nada de errado o problema é de lógica, pois o que vem de um input é texto é string e não número number, então o que você tem que fazer é simplesmente converter o valor que vem do input que é string para 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

Isto está acontecendo porque input1.value e input2.value são strings, portanto, o que você está fazendo é somando duas strings.

Para solucionar este problema, é necessário converter o value para number. Assim:

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

Só o que faltou foi converter os valores do inputs para numérico. Perceba que o input está como tipo "text", mesmo se você utilizar o tipo "number" o JavaScript ainda lerá como texto.

<!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>

Exemplo com 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .