Q:

Erro na hora de multiplicar 02 campos automaticamente com Javascript

Tenho o código abaixo do qual multiplica o valor do campo Valor com o valor campo Qtd e o resultado aparece automaticamente no campo ValorTotal. Vejam:

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>

O problema é que no campo valorTotal estava aparecendo NaN antes de digitar no segundo campo e para impedir, criei a condicional no código acima, só que agora não consigo digitar no campo. Como posso corrigir isso?

A:

O problema é que enquanto o campo estiver vazio, o value será uma string vazia e você está tentando converter uma string vazia para decimal, resultando em NaN. Veja:

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

Então por que não converter para decimal e multiplicar apenas quando possuir os dois valores?

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>

Fora isso, é um tanto quanto esquisito um campo responder no evento focus e outro no blur.

