Error when multiplying 02 fields automatically with Javascript

Question

I have the code below which multiplies the value of the field Valor with the field value Qtd and the result automatically appears in the field Total value. Look at:

function calcular() {
  var valor1 = parseInt(document.getElementById('valor').value, 10);
  var valor2 = parseInt(document.getElementById('qtd').value, 10);
  var multiplicar = valor1 * valor2;
  if (multiplicar == 'NaN') {
    document.getElementById('valorTotal').value = 0;
  } else {
    document.getElementById('valorTotal').value = multiplicar;
  }
}

<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">Valor:</label>
    <input type="text" name="Valor" id="valor" class="form-control" onfocus="calcular()">
  </div>
</div>
<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">Qtd:</label>
    <input type="text" name="Qtd" id="qtd" class="form-control" onblur="calcular()">
  </div>
</div>
<div class="col-md-12">
  <div class="form-group">
    <div class="form-group label-floating">
      <label class="control-label">Valor Total:</label>
      <input type="text" name="ValorTotal" id="valorTotal" class="form-control">
    </div>
  </div>
</div>

The problem is that in the field valorTotal was appearing Nan Before typing in the second field and to prevent, I created the conditional in the code above, but now I can’t type in the field. How can I fix this?

Answer 1

The problem is that as long as the field is empty, value will be a string empty and you are trying to convert a string empty to decimal, resulting in NaN. Behold:

console.log(parseInt('', 10))

So why not convert to decimal and multiply only when you have the two values?

function calcular() {
  var valor = document.getElementById('valor');
  var qtd = document.getElementById('qtd');
  var total = document.getElementById('valorTotal');
  
  if (valor.value && qtd.value) {
    total.value = parseInt(valor.value) * parseInt(qtd.value);
  }
}

<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">Valor:</label>
    <input type="text" name="Valor" id="valor" class="form-control" onfocus="calcular()">
  </div>
</div>
<div class="col-md-4">
  <div class="form-group label-floating">
    <label class="control-label">Qtd:</label>
    <input type="text" name="Qtd" id="qtd" class="form-control" onblur="calcular()">
  </div>
</div>
<div class="col-md-12">
  <div class="form-group">
    <div class="form-group label-floating">
      <label class="control-label">Valor Total:</label>
      <input type="text" name="ValorTotal" id="valorTotal" class="form-control">
    </div>
  </div>
</div>

Other than that, it’s kind of weird a field respond in the event focus and another in blur.