Meu código javascript não soma os números recebidos do html, e sim concatena eles.

Quando digito os números no html e mando calcular, o javascript não consegue somá-los, e simplesmente concatena os numeros. Por exemplo, numa soma de 1+1+1, o javascript me envia 111 no lugar de 3.

Agradeço se me ajudarem a saber porque isso acontece.

seguem os códigos abaixo:

html:


<html>
    <head>
        <meta charset="utf-8">
        <title>Calculadora</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="index.css">

    </head>

    <body>

            <form id="calculo">
                <fieldset>
                    <label for="a">Valor de A:</label>
                    <input id="a" name="a" type="number" placeholder="Digite o valor de (a)">
                </fieldset>

                <fieldset>
                    <label for="b">Valor de B:</label>
                    <input id="b" name="b" type="number" placeholder="Digite o valor de (b)">
                </fieldset>

                <fieldset>
                    <label for="c">Valor de C:</label>
                    <input id="c" name="c" type="number"placeholder="Digite o valor de (c)">
                </fieldset>

                <button class="calcular" type="submit" >Calcular</button>


            </form>

    <script src="principal.js"></script>

    </body>
</html>

javascript:

function soma (a,b,c){
    var somatoria = a + b + c;
    console.log(somatoria);
}


var botaoCalcular = document.querySelector(".calcular");
botaoCalcular.addEventListener("click", function (event) {
    event.preventDefault();

    var form = document.querySelector("#calculo");

    var a = form.a.value;
    var b = form.b.value;
    var c = form.c.value;

    soma (a,b,c);

});

Mergulhe em programação