Doubt to add values with for in Javascript

1

I have the following PHP / HTML page:

<?php
include_once("conexao.php");
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <style type="text/css">

    body{
        background-color: #34495e;
    }
    p {
        color: white;
    }
    h3 {
        color: white;
    }
</style>
<script type="text/javascript">
        var x = 0; //initlal text box count
        function alerta(produto){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtProduto"+x).innerHTML = "<input type='number' id='preco"+x+"' value='"+this.responseText+"'>";
                    //document.getElementById("tipo").focus();
                }
            }
            xmlhttp.open("GET", "pesquisa_preco.php?produto="+produto, true);
            xmlhttp.send();
        }

        $(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID


    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<p>Produto '+x+'<select class="form-control" id="produto'+x+'" name="produto'+x+'" onchange="alerta(this.value)"></select><span id="txtProduto'+x+'"></span></p>');
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("produto"+x).innerHTML = this.responseText;
                        //document.getElementById("tipo").focus();
                    }
                }
                xmlhttp.open("GET", "pesquisa_produto.php?ativo=1", true);
                xmlhttp.send();
                window.scrollBy(0, 300);

            }
        });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;

    })
});

        function somaTotais(){
            for (var i = 1; i < x+1; i++) {
                var valor = parseFloat(document.getElementById("preco"+i+"").value, 10);
                window.alert(valor);
            }

        }

    </script>
    <title>Realizar Venda</title>
</head>
<body>
    <br><br><br><br>
    <div class="container">
        <button onclick="somaTotais(this)">Somar Totais</button>
        <form method="post" action="cadastra_venda.php" class="form-outline">
            <div class="row">
                <div class="col-md-2">
                    <p>Telefone: <input type="text" name="telefone" class="form-control"></p>
                </div>
                <div class="col-md-3">
                    <p>Cliente: <input type="text" name="cliente" class="form-control"></p>
                </div>
                <div class="col-md-3">
                    <p>Endereço: <input type="text" name="endereco" class="form-control"></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="input_fields_wrap"></div><span id="txtProduto"></span>
                </div>
            </div>
            <p><button class="add_field_button btn btn-info">Adicionar novo produto</button></p>
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                </div>
                <div class="col-md-4">
                    <p>Valor Total: <input type="number" name="valor" class="form-control"></p>
                </div>
            </div>
            <p><input type="submit" name="submit" value="Realizar Venda" class="btn btn-success"></p>   

        </form>


    </div>



</body>
</html>
<?php
include_once("menu.php");
?>

I wanted help in this part here:

 function somaTotais(){
            for (var i = 1; i < x+1; i++) {
                var valor = parseFloat(document.getElementById("preco"+i+"").value, 10);
                window.alert(valor);
            }

        }

Where it takes the inputs of values that are in the form, which are added dynamically, as in the print below:

I wanted him to add the values into a single variable, and throw me that variable later.

The way it is now, it gives me a window.alert for every price, I wanted a window.alert just with the sum of the prices, but it looks like I'm traveling and I can not do that kkk

    
asked by anonymous 13.07.2018 / 19:15

1 answer

1

The declaration of the value variable should not be in loop fo , you should use + = operator / p>

  parseFloat (document.getElementById ("price" + i + ""). value, 10);

Get accumulated in the variable value .

function somaTotais(){
   var valor = 0;
   for (var i = 1; i < x+1; i++) {
     valor += parseFloat(document.getElementById("preco"+i+"").value, 10);          
   }
   window.alert(valor);     
}
    
13.07.2018 / 19:23