Sum of values with javascript, error?

Asked

Viewed 92 times

2

I have a solution that sums up values relative to the value of a input check only if it is selected, but if you select the items from first to last the sum is done normally but only the last ones are selected input from the table the value is zeroed, follows code sample.

function selecionaDactes() {
  var ids = document.getElementsByClassName('editar');
  gravaArray(ids);
}

function gravaArray(dados) {
  var array_dados = dados;
  var teste = Array();
  var valor = Array();
  for (var x = 0; x <= array_dados.length; x++) {
    if (typeof array_dados[x] == 'object') {
      if (array_dados[x].checked) {
        teste[x] = array_dados[x].id;
        valor[x] = parseFloat(array_dados[x].value);
      }
    }
  }
  teste = teste.filter(Boolean);
  document.getElementById('docs').value = teste;
  valorTotal(valor);
}

function valorTotal(valor) {
  var array_valores = valor;
  var total = 0;
  for (var a = 0; a <= Object.keys(array_valores).length; a++) {
    if (array_valores[a] != '' && array_valores[a] != undefined && array_valores[a] != NaN) {
      total = parseFloat(total + array_valores[a]);
    }
  }
  total = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
  document.getElementById('valor').value = total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form name="teste" method="#" action="">
  <label>Documents:
  <input type="text" name="docs" id="docs"/></label>
  <br>
  <label>Values:
  <input type="text" name="valor" id="valor"/></label>
  <br>
</form>
<table id="tbl_dactes" border="0" class="table table-condensed table-hover">
  <thead>
    <tr>
      <th align="center">#</th>
      <th>Transportador</th>
      <th>Conhecimento</th>
      <th>R$ Frete</th>
      <th>Data Emissão</th>
      <th>Fornecedor</th>
      <th><span class="glyphicon glyphicon-pencil"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="438283" value="65.58"> </td>
      <td>Dll logistica</td>
      <td>438283</td>
      <td><span class="valor_dacte">R$ 65,58</span></td>
      <td>03/05/2017</td>
      <td>Aliexpress</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="3171" value="73.62"> </td>
      <td>Inter Modal</td>
      <td>3171</td>
      <td><span class="valor_dacte">R$ 73,62</span></td>
      <td>05/05/2017</td>
      <td>Ebay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="191513" value="65"> </td>
      <td>Italian Group Global</td>
      <td>191513</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>09/05/2017</td>
      <td>FastBay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18977" value="157.74"> </td>
      <td>All In Global</td>
      <td>18977</td>
      <td><span class="valor_dacte">R$ 157,74</span></td>
      <td>08/05/2017</td>
      <td>Tesla</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18969" value="181.32"> </td>
      <td>Inter Modal</td>
      <td>18969</td>
      <td><span class="valor_dacte">R$ 181,32</span></td>
      <td>08/05/2017</td>
      <td>Adidas</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="190999" value="65"> </td>
      <td>Global Latin</td>
      <td>190999</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>04/05/2017</td>
      <td>Footage</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="1296" value="253.34"> </td>
      <td>E-Log Transportes Rodoviarios LTDA</td>
      <td>1296</td>
      <td><span class="valor_dacte">R$ 253,34</span></td>
      <td>09/05/2017</td>
      <td>Nike</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="431587" value="191.25"> </td>
      <td>Vast</td>
      <td>431587</td>
      <td><span class="valor_dacte">R$ 191,25</span></td>
      <td>30/03/2017</td>
      <td>Etti</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="5161" value="400.92"> </td>
      <td>Tico Tico</td>
      <td>5161</td>
      <td><span class="valor_dacte">R$ 400,92</span></td>
      <td>29/04/2017</td>
      <td>LaCoste</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18216" value="148.8"> </td>
      <td>Italian Log</td>
      <td>18216</td>
      <td><span class="valor_dacte">R$ 148,80</span></td>
      <td>21/04/2017</td>
      <td>Vine</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="435335" value="377.15"> </td>
      <td>Porto Ferreira Portugal xpress</td>
      <td>435335</td>
      <td><span class="valor_dacte">R$ 377,15</span></td>
      <td>18/04/2017</td>
      <td>Sardinha</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
  </tbody>
</table>

if I select only the 2 last records the value is 0.00, I am not finding the error, I believe the error is when generating the array with the values.

javascript

  • Explains better the relationship between checkbox and the + at the end of each line. Should go summing? or summing all at once by clicking on any +?

  • The most at the end is a button that calls the function that sums the selected inputs. and presents this sum in another input with the total, only the selected should be summed.

  • Okay, just to be clear to me: more at the end of each line does the sum of all the ones that are selected and not just the line clicked, that’s it?

  • Exactly, it is generic I should put only one button at the top of the table but as my table is very large I put in all lines. I’ll clean up after.

  • 1

    I put an answer with simpler code. You could do these calculations with the event change checkbox and use an icon edit as the name of the column suggests (leaving aside the +). Or else use the + for quantities.

2 answers

3


If I understand the problem correctly, it turns out that when you fill the array value, you use

valor[x] = parseFloat(array_dados[x].value);

note that this can result in filling out without an order as it will only add in array when the condition if(array_dados[x].checked) be satisfied.

I simply added an auxiliary counter contAux to define the index in the array and the algorithm worked as expected.

function selecionaDactes() {
  var ids = document.getElementsByClassName('editar');

  gravaArray(ids);
}

function gravaArray(dados) {
  var array_dados = dados;
  var contAux = 0;
  var teste = Array();
  var valor = Array();

  for (var x = 0; x <= array_dados.length; x++) {
    if (typeof array_dados[x] == 'object') {
      if (array_dados[x].checked) {
        teste[x] = array_dados[x].id;
        //valor[x] = parseFloat(array_dados[x].value);
        valor[contAux] = parseFloat(array_dados[x].value);
        contAux++;
      }
    }
  }
  teste = teste.filter(Boolean);
  document.getElementById('docs').value = teste;
  valorTotal(valor);
}

function valorTotal(valor) {
  var array_valores = valor;
  var total = 0;

  for (var a = 0; a <= Object.keys(array_valores).length; a++) {
    if (array_valores[a] != '' && array_valores[a] != undefined && array_valores[a] != NaN) {

      total = parseFloat(total + array_valores[a]);
    }
  }

  total = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
  //alert(total);

  document.getElementById('valor').value = total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form name="teste" method="#" action="">
  <label>Documents:
  <input type="text" name="docs" id="docs"/></label>
  <br>
  <label>Values:
  <input type="text" name="valor" id="valor"/></label>
  <br>
</form>
<table id="tbl_dactes" border="0" class="table table-condensed table-hover">
  <thead>
    <tr>
      <th align="center">#</th>
      <th>Transportador</th>
      <th>Conhecimento</th>
      <th>R$ Frete</th>
      <th>Data Emissão</th>
      <th>Fornecedor</th>
      <th><span class="glyphicon glyphicon-pencil"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="438283" value="65.58"> </td>
      <td>Dll logistica</td>
      <td>438283</td>
      <td><span class="valor_dacte">R$ 65,58</span></td>
      <td>03/05/2017</td>
      <td>Aliexpress</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="3171" value="73.62"> </td>
      <td>Inter Modal</td>
      <td>3171</td>
      <td><span class="valor_dacte">R$ 73,62</span></td>
      <td>05/05/2017</td>
      <td>Ebay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="191513" value="65"> </td>
      <td>Italian Group Global</td>
      <td>191513</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>09/05/2017</td>
      <td>FastBay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18977" value="157.74"> </td>
      <td>All In Global</td>
      <td>18977</td>
      <td><span class="valor_dacte">R$ 157,74</span></td>
      <td>08/05/2017</td>
      <td>Tesla</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18969" value="181.32"> </td>
      <td>Inter Modal</td>
      <td>18969</td>
      <td><span class="valor_dacte">R$ 181,32</span></td>
      <td>08/05/2017</td>
      <td>Adidas</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="190999" value="65"> </td>
      <td>Global Latin</td>
      <td>190999</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>04/05/2017</td>
      <td>Footage</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="1296" value="253.34"> </td>
      <td>E-Log Transportes Rodoviarios LTDA</td>
      <td>1296</td>
      <td><span class="valor_dacte">R$ 253,34</span></td>
      <td>09/05/2017</td>
      <td>Nike</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="431587" value="191.25"> </td>
      <td>Vast</td>
      <td>431587</td>
      <td><span class="valor_dacte">R$ 191,25</span></td>
      <td>30/03/2017</td>
      <td>Etti</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="5161" value="400.92"> </td>
      <td>Tico Tico</td>
      <td>5161</td>
      <td><span class="valor_dacte">R$ 400,92</span></td>
      <td>29/04/2017</td>
      <td>LaCoste</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18216" value="148.8"> </td>
      <td>Italian Log</td>
      <td>18216</td>
      <td><span class="valor_dacte">R$ 148,80</span></td>
      <td>21/04/2017</td>
      <td>Vine</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="435335" value="377.15"> </td>
      <td>Porto Ferreira Portugal xpress</td>
      <td>435335</td>
      <td><span class="valor_dacte">R$ 377,15</span></td>
      <td>18/04/2017</td>
      <td>Sardinha</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
  </tbody>
</table>

In that other snippet, I left indicated on the console the error that was happening with your code, just for example, mark the last checkbox and click to make the calculation

function selecionaDactes() {
  var ids = document.getElementsByClassName('editar');

  gravaArray(ids);
}

function gravaArray(dados) {
  var array_dados = dados;
  var contAux = 0;
  var teste = Array();
  var valor = Array();

  for (var x = 0; x <= array_dados.length; x++) {
    if (typeof array_dados[x] == 'object') {
      if (array_dados[x].checked) {
        teste[x] = array_dados[x].id;
        valor[x] = parseFloat(array_dados[x].value);
        //valor[contAux] = parseFloat(array_dados[x].value);
        contAux++;
      }
    }
  }
  teste = teste.filter(Boolean);
  document.getElementById('docs').value = teste;
  valorTotal(valor);
}

function valorTotal(valor) {
  var array_valores = valor;
  var total = 0;
  console.log(valor);
  for (var a = 0; a <= Object.keys(array_valores).length; a++) {
    if (array_valores[a] != '' && array_valores[a] != undefined && array_valores[a] != NaN) {

      total = parseFloat(total + array_valores[a]);
    }
  }

  total = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
  //alert(total);

  document.getElementById('valor').value = total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form name="teste" method="#" action="">
  <label>Documents:
  <input type="text" name="docs" id="docs"/></label>
  <br>
  <label>Values:
  <input type="text" name="valor" id="valor"/></label>
  <br>
</form>
<table id="tbl_dactes" border="0" class="table table-condensed table-hover">
  <thead>
    <tr>
      <th align="center">#</th>
      <th>Transportador</th>
      <th>Conhecimento</th>
      <th>R$ Frete</th>
      <th>Data Emissão</th>
      <th>Fornecedor</th>
      <th><span class="glyphicon glyphicon-pencil"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="438283" value="65.58"> </td>
      <td>Dll logistica</td>
      <td>438283</td>
      <td><span class="valor_dacte">R$ 65,58</span></td>
      <td>03/05/2017</td>
      <td>Aliexpress</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="3171" value="73.62"> </td>
      <td>Inter Modal</td>
      <td>3171</td>
      <td><span class="valor_dacte">R$ 73,62</span></td>
      <td>05/05/2017</td>
      <td>Ebay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="191513" value="65"> </td>
      <td>Italian Group Global</td>
      <td>191513</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>09/05/2017</td>
      <td>FastBay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18977" value="157.74"> </td>
      <td>All In Global</td>
      <td>18977</td>
      <td><span class="valor_dacte">R$ 157,74</span></td>
      <td>08/05/2017</td>
      <td>Tesla</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18969" value="181.32"> </td>
      <td>Inter Modal</td>
      <td>18969</td>
      <td><span class="valor_dacte">R$ 181,32</span></td>
      <td>08/05/2017</td>
      <td>Adidas</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="190999" value="65"> </td>
      <td>Global Latin</td>
      <td>190999</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>04/05/2017</td>
      <td>Footage</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="1296" value="253.34"> </td>
      <td>E-Log Transportes Rodoviarios LTDA</td>
      <td>1296</td>
      <td><span class="valor_dacte">R$ 253,34</span></td>
      <td>09/05/2017</td>
      <td>Nike</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="431587" value="191.25"> </td>
      <td>Vast</td>
      <td>431587</td>
      <td><span class="valor_dacte">R$ 191,25</span></td>
      <td>30/03/2017</td>
      <td>Etti</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="5161" value="400.92"> </td>
      <td>Tico Tico</td>
      <td>5161</td>
      <td><span class="valor_dacte">R$ 400,92</span></td>
      <td>29/04/2017</td>
      <td>LaCoste</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18216" value="148.8"> </td>
      <td>Italian Log</td>
      <td>18216</td>
      <td><span class="valor_dacte">R$ 148,80</span></td>
      <td>21/04/2017</td>
      <td>Vine</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="435335" value="377.15"> </td>
      <td>Porto Ferreira Portugal xpress</td>
      <td>435335</td>
      <td><span class="valor_dacte">R$ 377,15</span></td>
      <td>18/04/2017</td>
      <td>Sardinha</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
  </tbody>
</table>

  • So I couldn’t use the "for()" counter itself? , or the error is because I didn’t start the array key at 0?

  • 1

    @Wagnerfernandomomesso Power you can, but then the problem will be in function valorTotal(), for in her the for goes up to Object.keys(array_valores).length and if you check for example, only the last check box, the Object.keys(array_valores).length will be 1, and the value array will have 11 Keys, they being 10 Undefined and the last with the correct value.

  • @Wagnerfernandomomesso Maybe my explanation got a little confused, I edited the answer adding to the end of it another snippet showing what was happening with your code.

  • thanks a lot, now I understand the error, I need to learn how to debug javascript, I still do not know how to use debug, only in php, question my reciocinio logic was right?

  • 2

    I believe it was, it was a very basic mistake, but consider the @Sergio response, it is very clear and objective, uses specific functions, avoiding the use of so many loops, so it is easier to even find a possible error :D

2

I changed your code to make it simpler, mainly because you can make a selector with :checked so you don’t need the loops.

function selecionaDactes() {
  var selecionados = [].slice.call(document.querySelectorAll('#tbl_dactes :checked'));

  var ids = selecionados.map(function(el) {
    return el.id;
  }).join(', ');
  document.getElementById('docs').value = ids;


  var total = selecionados.reduce(function(soma, el) {
    return soma + Number(el.value);
  }, 0);
  document.getElementById('valor').value = total.toLocaleString('pt-br', {
    minimumFractionDigits: 2,
    currency: 'BRL'
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form name="teste" method="#" action="">
  <label>Documents:
  <input type="text" name="docs" id="docs"/></label>
  <br>
  <label>Values:
  <input type="text" name="valor" id="valor"/></label>
  <br>
</form>
<table id="tbl_dactes" border="0" class="table table-condensed table-hover">
  <thead>
    <tr>
      <th align="center">#</th>
      <th>Transportador</th>
      <th>Conhecimento</th>
      <th>R$ Frete</th>
      <th>Data Emissão</th>
      <th>Fornecedor</th>
      <th><span class="glyphicon glyphicon-pencil"></span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="438283" value="65.58"> </td>
      <td>Dll logistica</td>
      <td>438283</td>
      <td><span class="valor_dacte">R$ 65,58</span></td>
      <td>03/05/2017</td>
      <td>Aliexpress</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="3171" value="73.62"> </td>
      <td>Inter Modal</td>
      <td>3171</td>
      <td><span class="valor_dacte">R$ 73,62</span></td>
      <td>05/05/2017</td>
      <td>Ebay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="191513" value="65"> </td>
      <td>Italian Group Global</td>
      <td>191513</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>09/05/2017</td>
      <td>FastBay</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18977" value="157.74"> </td>
      <td>All In Global</td>
      <td>18977</td>
      <td><span class="valor_dacte">R$ 157,74</span></td>
      <td>08/05/2017</td>
      <td>Tesla</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18969" value="181.32"> </td>
      <td>Inter Modal</td>
      <td>18969</td>
      <td><span class="valor_dacte">R$ 181,32</span></td>
      <td>08/05/2017</td>
      <td>Adidas</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="190999" value="65"> </td>
      <td>Global Latin</td>
      <td>190999</td>
      <td><span class="valor_dacte">R$ 65,00</span></td>
      <td>04/05/2017</td>
      <td>Footage</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="1296" value="253.34"> </td>
      <td>E-Log Transportes Rodoviarios LTDA</td>
      <td>1296</td>
      <td><span class="valor_dacte">R$ 253,34</span></td>
      <td>09/05/2017</td>
      <td>Nike</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="431587" value="191.25"> </td>
      <td>Vast</td>
      <td>431587</td>
      <td><span class="valor_dacte">R$ 191,25</span></td>
      <td>30/03/2017</td>
      <td>Etti</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="5161" value="400.92"> </td>
      <td>Tico Tico</td>
      <td>5161</td>
      <td><span class="valor_dacte">R$ 400,92</span></td>
      <td>29/04/2017</td>
      <td>LaCoste</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="18216" value="148.8"> </td>
      <td>Italian Log</td>
      <td>18216</td>
      <td><span class="valor_dacte">R$ 148,80</span></td>
      <td>21/04/2017</td>
      <td>Vine</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
    <tr>
      <td><input class="editar" type="checkbox" name="checkboxes" id="435335" value="377.15"> </td>
      <td>Porto Ferreira Portugal xpress</td>
      <td>435335</td>
      <td><span class="valor_dacte">R$ 377,15</span></td>
      <td>18/04/2017</td>
      <td>Sardinha</td>
      <td><a href="#" data-toggle="modal" data-target="#dan" onclick="selecionaDactes()"><span class="glyphicon glyphicon-plus"></span></a></td>
      <!-- inicio modal -->

    </tr>
  </tbody>
</table>

  • 1

    your code is very clean, I did not imagine I could use so too, I wanted to mark the two answers as solved but I can not, the previous solution solved my problem immediately, yours too but before brand-As solved I need to make some codes similar to this to minimize mine and keep understanding. a new case was the "Join" I haven’t done anything with it, I’m used to working directly with inputs, but I saw that I can work directly in the table, this is new for me. thank you.

Browser other questions tagged javascript

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