NaN ? Só funciona com refresh...

[Pedro Lima 0]

Bom dia, estou com a seguinte situação: Tento fazer uma coisa bem simples no javascript que se resume em 4 input-texts onde conforme for adicionando valores, ao sair de cada input ele soma e imprime em um <h3> no fim da página, que sempre da esse "NaN", porém, quando eu dou um f5 na página ele funciona...

Obs: Não estou utilizando nenhum framework, apenas o bootstrap.

 

js

$(document).ready(function(){
var resultado = 0;
var capacidade_produtiva =parseInt(document.getElementById("capacidade_produtiva").value); //pego valor do input1
var quantidade_produzida_e_vendida =parseInt(document.getElementById("quantidade_produzida_e_vendida").value); //pego valor do input2
var valor_unitario_de_venda =parseInt(document.getElementById("valor_unitario_de_venda").value); //pego valor do input3
var custo_unitario_de_producao =parseInt(document.getElementById("custo_unitario_de_producao").value); //pego valor do input4

	//Input1
	$("#capacidade_produtiva").focusout(function(){
		resultado += capacidade_produtiva;
	}); 
	//Input2
	$("#quantidade_produzida_e_vendida").focusout(function(){
		resultado += quantidade_produzida_e_vendida;
	}); 
	//Input3
	$("#valor_unitario_de_venda").focusout(function(){
		resultado += valor_unitario_de_venda;
	}); 
	//Input4
	$("#custo_unitario_de_producao").focusout(function(){
		resultado += custo_unitario_de_producao;
	}); 

	//H3 com o resultado
	$("input").focusout(function(){
	  $("h3").text(resultado);
	}); 

});

Minha view

<form class="form-horizontal">
                        <fieldset>
                            <legend>Form</legend>

                            <div class="form-group">
                                <label for="1" class="col-lg-4 control-label" >Capacidade produtiva (CP)</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="capacidade_produtiva" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></input>
                                </div>
                                <div class="col-lg-2">
                                    <input type="text" class="form-control" disabled="" id="1" placeholder="70%"></input>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="1" class="col-lg-4 control-label">Quantidade produzida e vendida</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="quantidade_produzida_e_vendida" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
                                </div>
                                <div class="col-lg-2">
                                    <input type="text" class="form-control" disabled="" id="1" placeholder="70%"></input>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="1" class="col-lg-4 control-label">Valor unitário de venda</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="valor_unitario_de_venda"  data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></input>
                                </div>
                                <div class="col-lg-2">
                                    <input type="text" class="form-control" disabled="" id="1" placeholder="70%"></input>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="1" class="col-lg-4 control-label">Custo unitário de produção</label>
                                <div class="col-lg-6">
                                    <input type="text" class="form-control" id="custo_unitario_de_producao" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"></input>
                                </div>
                                <div class="col-lg-2">
                                    <input type="text" class="form-control" disabled="" id="1" placeholder="70%"></input>
                                </div>
                            </div>
                            <hr>
                            <h3>Resultado</h3>
                        </fieldset>
                    </form>

           <script src="/js/application.js"></script>

O que eu preciso fazer?

[William Bruno 1501]

NaN significa: Not a Number

 

Quando o campo não possui nenhum valor, o valor é vazio "", e vazio realmente não é um número.

Ai qndo você dá refresh, o campo passa a ter um valor numérico, e por isso o NaN não aparece mais.

 

O que você precisa fazer é garantir nunca somar um valor "não numérico" com um numérico.

 

parseInt("") // -> NaN
parseInt("a") // -> NaN

[Pedro Lima 0]

Obrigado pela resposta William, acredito que com isso conseguirei resolver meu problema.