O seu código está um pouco confuso, mas vamos ver um exemplo do porquê uma soma pode não funcionar com JavaScript.

O primeiro ponto que merece destaque é que quando pegamos o `value` com JavaScript ele retornará uma *string*. Para converter para um *integer* e poder somar numericamente esse valores você precisará usar uma função chamada `parseInt()`.

Veja esse exemplo **sem** o `parseInt()`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function somarValores() {
      let s1 = document.getElementById("txt1").value;
      let s2 = document.getElementById("txt2").value;
      let s3 = document.getElementById("txt3").value;
      let resposta = (s1 + s2 + s3);
      alert(resposta);
    }

<!-- language: lang-html -->

    <fieldset>
      <legend>Cálculo de soma sem utilizar o parseInt</legend>
      <p>
        <label>Valor 1:</label>
        <input id="txt1" type="number" />
      </p>
      <p>
        <label>Valor 2: </label>
        <input id="txt2" type="number" />
      </p>
      <p>
        <label>Valor 3: </label>
        <input id="txt3" type="number" />
      </p>
      <button id="somar" onclick="somarValores()">Somar</button>
    </fieldset>

<!-- end snippet -->

Ao digitar, por exemplo, 10 no primeiro campo, 10 no segundo e terceiro teremos o valor: 101010. O que aconteceu é que ele concatenou as *strings*, não somou.

Agora veja esse exemplo **com** o `parseInt()`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function somarValores() {
      let s1 = parseInt(document.getElementById("txt1").value);
      let s2 = parseInt(document.getElementById("txt2").value);
      let s3 = parseInt(document.getElementById("txt3").value);
      let resposta = (s1 + s2 + s3);
      alert(resposta);
    }

<!-- language: lang-html -->

    <fieldset>
      <legend>Cálculo de soma utilizando o parseInt</legend>
      <p>
        <label>Valor 1:</label>
        <input id="txt1" type="number" />
      </p>
      <p>
        <label>Valor 2: </label>
        <input id="txt2" type="number" />
      </p>
      <p>
        <label>Valor 3: </label>
        <input id="txt3" type="number" />
      </p>
      <button id="somar" onclick="somarValores()">Somar</button>
    </fieldset>

<!-- end snippet -->

Veja, ao somar 10 + 10 + 10 temos o resultado como 30, que seria o correto.

Com base no seu código você poderia editar essa parte para um `parseInt()`. 

    calc_quant_total_produto += parseInt(quant_produto[i].value);

Além do `parseInt()` há também o `parseFloat()` para números que não são inteiros.

**Referências:**

- [parseInt()][1]
- [parseFloat()][2]


  [1]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  [2]: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseFloat