Calculadora automática com javascript (sem click ou refresh)
Boa noite pessoal, estou com um problema no código abaixo:
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?
<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
Curtidas 0
Melhor post
Jothaz
20/01/2016
Pode usar usar o evento "onBlur", eu não gosto muito dele, pois as vezes pode complicar controlá-lo.
Link funcional jsfiddle
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
GOSTEI 1
Mais Respostas
Marlon Gera
20/01/2016
Deu certo mano, mais qual seria a dificuldade de controle dele? Você poderia me citar algo?
GOSTEI 0
Jothaz
20/01/2016
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.
GOSTEI 0
Christian Fuin
20/01/2016
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";
}
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";
}
GOSTEI 1
Marlon Gera
20/01/2016
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"?
GOSTEI 0
Jothaz
20/01/2016
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!?
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!?
GOSTEI 0
Marlon Gera
20/01/2016
Muito Obrigado.
GOSTEI 0