0

Estou tentando fazer um calculo ICMS e estou tendo um problema aparentemente bobo que é pegar o valor dos inputs do meu HTML, eu pensei que o problema estava na função, mas quando eu tento dar um alert ou console.log() nas variáveis, elas ficam "em branco" nem um undefined é retornado, o que pode ser?

var vProduto = document.getElementById('vProduto').value;
var frete = document.getElementById('frete').value;
var seguro = document.getElementById('seguro').value;
var dAcessorias = document.getElementById('dAcessorias').value;
var descontos = document.getElementById('descontos').value;
var aliqInter = document.getElementById('aliqInter').value;
var vIPI = document.getElementById('vIPI').value;
var pMVA = document.getElementById('pMVA').value;
var btn = document.getElementById('calcular');
console.log(vProduto);
btn.addEventListener('click', function() {
  calculaIcmsST(vProduto, frete, seguro, dAcessorias, descontos, aliqInter, vIPI, pMVA)
  alert(vProduto);
});

function calculaIcmsST(vProduto, frete, seguro, dAcessorias, descontos, aliqInter, vIPI, pMVA) {
  var baseInter = vProduto + frete + seguro + dAcessorias - descontos;
  var vIcmsInter = baseInter * (aliqInter / 100);
  var baseST = (vProduto + vIPI + frete + seguro + dAcessorias - descontos) * (1 + (pMVA / 100));
  console.log(baseInter, vIcmsInter, baseST)
}

/*8000, 35, 0, 1565, 0, 12, 0, 0*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-hover">
        <tbody>
          <tr>
            <td>Aliquota Origem</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqOri">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota Destino</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqDest">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do produto</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vProduto">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor dos descontos</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="descontos">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Frete</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="frete">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Seguro</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="seguro">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do IPI</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vIPI">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Outras Despesas Acessórias</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="dAcessorias">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Interestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqInter">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Intraestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqIntra">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>% do MVA</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="pMVA">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <button style="width: 100%" class="btn btn-lg btn-success" id="calcular">Calcular</button>
    </div>
  </div>
</section>

3
  • Mas fica mais dificil pra quem ta perguntando porque o editor de texto do site pra quem esta acostumado a usar tab e pessimo.
    – user83428
    15/08/2017 às 0:03
  • pra identar o codigo porque quando copia e cola ele nao fica identado como tava eu acho.
    – user83428
    15/08/2017 às 0:07
  • nossa nao sabia desses truques.
    – user83428
    15/08/2017 às 0:07

3 Respostas 3

1

O problema é porque você esta armazenado os dados do input antes preenche-los. O correto é executar dentro do callback do evento, assim você terá os dados que preencheu.

Você poderia colocar var vProduto = document.getElementById('vProduto').value dentro do btn.addEventListener. Mas isso é uma péssima ideia, porque a cada clique seria feito uma nova consulta nos elementos (desempenho ruim!), então segue com o que você tem apenas altere para:

var vProduto = document.getElementById('vProduto');
var frete = document.getElementById('frete');
var seguro = document.getElementById('seguro');
var dAcessorias = document.getElementById('dAcessorias');
var descontos = document.getElementById('descontos');
var aliqInter = document.getElementById('aliqInter');
var vIPI = document.getElementById('vIPI');
var pMVA = document.getElementById('pMVA');
var btn = document.getElementById('calcular');

btn.addEventListener('click', function() {
  calculaIcmsST(vProduto.value, frete.value, seguro.value, dAcessorias.value, descontos.value, aliqInter.value, vIPI.value, pMVA.value)
});

function calculaIcmsST(vProduto, frete, seguro, dAcessorias, descontos, aliqInter, vIPI, pMVA) {
  var baseInter = vProduto + frete + seguro + dAcessorias - descontos;
  var vIcmsInter = baseInter * (aliqInter / 100);
  var baseST = (vProduto + vIPI + frete + seguro + dAcessorias - descontos) * (1 + (pMVA / 100));
  console.log(baseInter, vIcmsInter, baseST)
}
1

Simplificando tudo fica assim: no click do botão chama a função calculaIcmsST()

var btn = document.getElementById('calcular');

btn.addEventListener('click', function() {
  calculaIcmsST();
});

function calculaIcmsST() {
var vProduto = Number(document.getElementById('vProduto').value);
var frete = Number(document.getElementById('frete').value);
var seguro = Number(document.getElementById('seguro').value);
var dAcessorias = Number(document.getElementById('dAcessorias').value);
var descontos = Number(document.getElementById('descontos').value);
var aliqInter = Number(document.getElementById('aliqInter').value);
var vIPI = Number(document.getElementById('vIPI').value);
var pMVA = Number(document.getElementById('pMVA').value);
var btn = document.getElementById('calcular');

  var baseInter = vProduto + frete + seguro + dAcessorias - descontos;
  var vIcmsInter = baseInter * (aliqInter / 100);
  var baseST = (vProduto + vIPI + frete + seguro + dAcessorias - descontos) * (1 + (pMVA / 100));
  console.log(baseInter, vIcmsInter, baseST)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-hover">
        <tbody>
          <tr>
            <td>Aliquota Origem</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqOri">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota Destino</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqDest">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do produto</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vProduto">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor dos descontos</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="descontos">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Frete</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="frete">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Seguro</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="seguro">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do IPI</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vIPI">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Outras Despesas Acessórias</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="dAcessorias">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Interestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqInter">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Intraestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqIntra">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>% do MVA</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="pMVA">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <button style="width: 100%" class="btn btn-lg btn-success" id="calcular">Calcular</button>
    </div>
  </div>
</section>

Com javascript puro

function calculaIcmsST() {
var vProduto = Number(document.getElementById('vProduto').value);
var frete = Number(document.getElementById('frete').value);
var seguro = Number(document.getElementById('seguro').value);
var dAcessorias = Number(document.getElementById('dAcessorias').value);
var descontos = Number(document.getElementById('descontos').value);
var aliqInter = Number(document.getElementById('aliqInter').value);
var vIPI = Number(document.getElementById('vIPI').value);
var pMVA = Number(document.getElementById('pMVA').value);
var btn = document.getElementById('calcular');

  var baseInter = vProduto + frete + seguro + dAcessorias - descontos;
  var vIcmsInter = baseInter * (aliqInter / 100);
  var baseST = (vProduto + vIPI + frete + seguro + dAcessorias - descontos) * (1 + (pMVA / 100));
  console.log(baseInter, vIcmsInter, baseST)
}
<section class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-hover">
        <tbody>
          <tr>
            <td>Aliquota Origem</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqOri">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota Destino</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqDest">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do produto</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vProduto">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor dos descontos</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="descontos">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Frete</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="frete">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do Seguro</td>
            <td>
              <div class="input-group">

                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="seguro">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Valor do IPI</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="vIPI">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Outras Despesas Acessórias</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="dAcessorias">
                <span class="input-group-addon">R$</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Interestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqInter">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>Aliquota do ICMS Intraestadual</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="aliqIntra">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
          <tr>
            <td>% do MVA</td>
            <td>
              <div class="input-group">
                <input type="number" class="form-control" aria-label="Amount (to the nearest dollar)" id="pMVA">
                <span class="input-group-addon">%</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <button style="width: 100%" class="btn btn-lg btn-success" id="calcular" onclick="calculaIcmsST()">Calcular</button>
    </div>
  </div>
</section>

0

Voce esta guardando nas variaveis document.getElementById("id").value e elas ficam estaticas, voce deve guardar nas variaveis apenas o elemento sem aquele .value no final e quando voce for fazer algo com as variaveis ai voce usa variavel.value, dai sim ele vai pegar o valor dos inputs.

1

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