Value of an input type number [closed]

Question

Value of an input type number [closed]

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

I'm trying to do an ICMS calculation and am having a seemingly silly problem that is getting the value of the inputs from my HTML, I thought the problem was in the function, but when I try to give alert or console.log() in variables, they are "blank" nor a undefined is returned, what 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

asked by anonymous 15.08.2017 / 01:53

3 answers

2

The problem is because you are storing the input data before it fills them. The correct one is to run within the event callback, so you have the data you filled out.

You could put var vProduct = document.getElementById ('vProduct'). value inside the btn.addEventListener. But this is a bad idea, because every click would be done a new query on the elements (bad performance!), Then go 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)
}

15.08.2017 / 02:25

2

Simplifying everything looks like this: in the click of the button it 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><sectionclass="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>

15.08.2017 / 02:53

Find the largest palindrome made from the product of two 3-digit numbers - Python Connecting PHP with the MySQL database

score 1 · Accepted Answer

You are saving in the variables document.getElementById("id").value and they are static, you should save in the variables only the element without that .value at the end and when you do something with the variables ai you use variavel.value, so yes it goes get the value of the inputs.