Calculadora automática com javascript (sem click ou refresh)
20/01/2016
0
<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?
Marlon Gera
Post mais votado
20/01/2016
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
Jothaz
Mais Posts
20/01/2016
Marlon Gera
20/01/2016
Jothaz
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.
21/01/2016
Christian Fuin
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";
}
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"?
22/01/2016
Jothaz
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!?
Clique aqui para fazer login e interagir na Comunidade :)