Value of an input of type number

Asked

Viewed 608 times

0

I’m trying to do an ICMS calculation and I’m having an apparently silly problem that is to take the value of inputs from my HTML, I thought the problem was in function, but when I try to give a alert or console.log() in the variables, they are "blank" nor a undefined is returned, which can be?

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>

javascript html

  • But it is more difficult for those who are asking because the text editor of the site for whom it is accustomed to use tab and pessimo.

  • to ident the code because when copy and glue it is not identado as I think.

  • our not knew these tricks.

3 answers

1

The problem is because you are stored input data before filling them in. The correct is to run inside the event callback, so you will have the data you filled in.

You could put var vProduct = Document.getElementById('vProduct'). value inside btn.addEventListener. But this is a bad idea, because every click would be made a new query in the elements (bad performance!), so follow with what you have just change to:

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

Simplifying everything is like this: at the click of the button calls the function 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>

With pure javascript

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


You’re holding on to the variables document.getElementById("id").value and they are Static, Oce should keep in the variables only the element without that. value at the end and when Voce is going to do something with the variables ai Voce uses variable.value, then yes it will get the value of the inputs.

Browser other questions tagged javascript html

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