Calculadora automática com javascript (sem click ou refresh)

20/01/2016

4

Boa noite pessoal, estou com um problema no código abaixo:

<script type="text/javascript">
	function calcular(){
		var valor = document.getElementById("valor").value;
		var quantidade = document.getElementById("quantidade").value;
		var var_quant = valor / quantidade;
		document.write("var_quant");
	}
</script>
<form id="cadastro">
		<label>Valor</label>
		<input type="text" id="valor">
		<label>Quantidade</label>
		<input type="text" id="quantidade">
		<label>Valor/Quantidade</label>
		<input type="text" id="var_qnt" value=''>
	</form>


Estou tentando fazer com que a ele calcule no input "Valor/Quantidade" ao colocar os valores nos inputs acima dele, alguém pode me ajudar?
Responder

Post mais votado

20/01/2016

Pode usar usar o evento "onBlur", eu não gosto muito dele, pois as vezes pode complicar controlá-lo.

  function calcular(){
				var_quant = 0;
        var valor = document.getElementById("valor").value;

        var quantidade = document.getElementById("quantidade").value;
        var var_quant = valor / quantidade;

        document.getElementById("var_qnt").value = var_quant;
    }


<label>Valor</label>
<input type="text" id="valor" onblur="calcular()">

<label>Quantidade</label>
<input type="text" id="quantidade" onblur="calcular()">

<label>Valor/Quantidade</label>
<input type="text" id="var_qnt" value='' readonly>




Link funcional jsfiddle
Responder

Mais Posts

20/01/2016

Marlon Gera

Deu certo mano, mais qual seria a dificuldade de controle dele? Você poderia me citar algo?
Responder

20/01/2016

Jothaz

Deu certo mano, mais qual seria a dificuldade de controle dele? Você poderia me citar algo?


Depende muito do que você vai fazer, as vezes pode confundir o usuário e nem sempre você quer atualizar algo ao "perde o foco" do controle.
Ou mesmo se for uma função que atualiza vários controles podem ocorrer erros pois alguns dos controles ainda não possuem valores.

Neste exemplo mesmo o resultado fica com "NaN", pois outros campos não existem. Então prefiro um botão executar onde faço a consistência se os campos foram preenchidos então executo o calculo. No seu caso como é só pesquisa não é tão problemático, mas em uma aplicação profissional eu acho fica bem feio e certamente o usuário irá reclamar. Tipo "que porra é essa do NaN?"

Então é mais prático centralizar as ações em um click do botão.

Mas depende do cenário e se lhe atender use-o sem problemas. E vai muito do gosto pessoal de cada um.
Responder

21/01/2016

Christian Fuin

Eu usaria a função Change do Jquery! simples e eficaz

No meu caso abaixo, quando eu mudo o numero ele chama a function que faz o calculo e atualiza o resultado.

Exemplo:

$('#ID_OBJETO').change(function(){
calc_total();
});
});


unction calc_total(){
var qtd = parseFloat(document.getElementById('qtd').value);
var a = document.getElementById('recheio').value;
if (a == 'Trufado'){
tot = qtd * 30,00;
}else {
tot = qtd * 25,00;
}
document.getElementById('total').value = "R$: " + tot + ",00";
}
Responder

22/01/2016

Marlon Gera


Depende muito do que você vai fazer, as vezes pode confundir o usuário e nem sempre você quer atualizar algo ao "perde o foco" do controle.
Ou mesmo se for uma função que atualiza vários controles podem ocorrer erros pois alguns dos controles ainda não possuem valores.

Neste exemplo mesmo o resultado fica com "NaN", pois outros campos não existem. Então prefiro um botão executar onde faço a consistência se os campos foram preenchidos então executo o calculo. No seu caso como é só pesquisa não é tão problemático, mas em uma aplicação profissional eu acho fica bem feio e certamente o usuário irá reclamar. Tipo "que porra é essa do NaN?"

Então é mais prático centralizar as ações em um click do botão.

Mas depende do cenário e se lhe atender use-o sem problemas. E vai muito do gosto pessoal de cada um.


Mais no caso eu posso usar um "if" para se não tiver nada em uma das lacunas ele nao fazer o calculo, ou so fazer o calculo quando tiver as duas lacunas preenchidas.
Acha que isso seria um meio de prefinir a chegada do "NaN"?
Responder

22/01/2016

Jothaz

Sim pode ser feito assim.

Só fiz a observação com forma de agregar mais informações, para que sempre leve-se em conta o cenário onde a solução será implementada.

Ok!?
Responder

22/01/2016

Marlon Gera

Muito Obrigado.
Responder