Problemas com função de soma em js
Boa tarde,
Sou iniciante em js e estou tendo alguns problemas, gostaria se alguém pudesse me ajudar.
Estou fazendo um formulário para uma agencia de viagens, nesse form a pessoa escolhe quais atrações quer visitar e o preço varia se o tipo de ingresso for de adulto ou de criança e pela quantidade de dias. Até aqui tudo tranquilo, consegui resolver, só que quando eu vou puxar as variáveis com esses resultados para fazer uma soma total ele simplesmente não soma, não soma nem traz a variável no alert(), já declarei como variavel global, já fiz tudo que imaginei, sou postar o codigo abaixo para ver se alguém tem alguma luz por ai.
Desde já agradeço.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var tot = form.total.value;
var lol = 500;
function operacao(){
var qnt = form.qnt.value;
var tp = form.tipo.value;
var dias = form.dias.value;
var aux = form.teste.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 100;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 110;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 130;
}
tot = prc * qnt;
document.getElementById("total").innerHTML= prc * qnt;
aux = tot;
if(document.form.total.value<0){
document.form.total.value ='';
}
}
function operacao2(){
var tot2 = form.total2.value;
var qnt = form.qnt2.value;
var tp = form.tipo2.value;
var dias = form.dias2.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 10;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 11;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 13;
}
tot2 = prc * qnt;
document.getElementById("total2").innerHTML= prc * qnt;
if(document.form.total2.value<0){
document.form.total2.value ='';
}
}
function operacao3(){
var tot3 = form.total3.value;
var qnt = form.qnt3.value;
var tp = form.tipo3.value;
var dias = form.dias3.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 1000;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 1100;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 1300;
}
tot3 = prc * qnt;
document.getElementById("total3").innerHTML= prc * qnt;
if(document.form.total3.value<0){
document.form.total3.value ='';
}
}
function somatotal(){
var tot3 = form.total3.value;
var tot2 = form.total2.value;
var testez = form.total3.value;
var teste = ((500 + 500) *2)
var total = ((tot3) + (tot2) + (tot));
alert('Total:'+ total);
//document.form.getElementsById("totalx").innerHTNL= tot3 + tot2 + tot;
}
</script>
</head>
<form name="form" >
<fieldset style="width:550px">
<p id="cartao">Dados pessoais</p>
<p>Preencha os campos com o nome completo das pessoas que deseja incluir no transfer</p>
<label for="t1Nome" style="width: 500px"><span>Nome Completo:</span><br/>
<input name="t1Nome" type="text" maxlength="100" style="float:left; width: 90%;" />
</label><br/><br/><br/>
<p id="atracao">Atração 1</p>
<label for="dias" style="width: 120px"><span>Quantos dias?</span><br/>
<select name="dias" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</label>
<label for="tipo" style="width: 150px"><span>Tipo de ingresso</span><br/>
<select name="tipo" size="1" onchange="javascript:operacao()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
</label>
<label for="qnt" style="width: 100px"><span>Quantidade:</span><br/>
<input type='text' name='qnt' onkeyup="javascript:operacao()" style="float:left; width: 70%;" />
</label>
<label style="width: 100px" for="total"><span>Total:</span><br/>
<label name="total" id="total" style="float:left; width: 100%;">
<input name="total" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
<input name="teste" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label><br/><br/><br/><br/>
<p id="atracao">Atração 2</p>
Quantos dias?<br/>
<select name="dias2" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao2()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Tipo de ingresso<br/>
<select name="tipo2" size="1" onchange="javascript:operacao2()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
Quantidade:<br/>
<input type='text' name='qnt2' onkeyup="javascript:operacao2()" style="float:left; width: 70%;" />
<label style="width: 100px" for="total2"><span>Total:</span><br/>
<label name="total2" id="total2" style="float:left; width: 100%;">
<input name="total2" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label><br/><br/><br/><br/><br/>
<p id="atracao">Atração 3</p>
<label for="dias3" style="width: 120px"><span>Quantos dias?</span><br/>
<select name="dias3" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao3()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</label>
<label for="tipo3" style="width: 150px"><span>Tipo de ingresso</span><br/>
<select name="tipo3" size="1" onchange="javascript:operacao3()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
</label>
<label for="qnt3" style="width: 100px"><span>Quantidade:</span><br/>
<input type='text' name='qnt3' onkeyup="javascript:operacao3()" style="float:left; width: 70%;" />
</label>
<label style="width: 100px" for="total3"><span>Total:</span><br/>
<label name="total3" id="total3" style="float:left; width: 100%;">
<input name="total3" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label><br/><br/><br/><br/>
<label style="width: 100px" for="totalx"><span>Total++:</span><br/>
<label name="totalx" id="totalx" style="float:left; width: 100%;">
<input name="totalx" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label>
<input type="submit" style="width:90px;height:25px;float:left;margin:0px 10px 0px 150px" onclick="javascript:somatotal()" name="enviar" value="Enviar" />
</fieldset>
</form>
</html>
Sou iniciante em js e estou tendo alguns problemas, gostaria se alguém pudesse me ajudar.
Estou fazendo um formulário para uma agencia de viagens, nesse form a pessoa escolhe quais atrações quer visitar e o preço varia se o tipo de ingresso for de adulto ou de criança e pela quantidade de dias. Até aqui tudo tranquilo, consegui resolver, só que quando eu vou puxar as variáveis com esses resultados para fazer uma soma total ele simplesmente não soma, não soma nem traz a variável no alert(), já declarei como variavel global, já fiz tudo que imaginei, sou postar o codigo abaixo para ver se alguém tem alguma luz por ai.
Desde já agradeço.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var tot = form.total.value;
var lol = 500;
function operacao(){
var qnt = form.qnt.value;
var tp = form.tipo.value;
var dias = form.dias.value;
var aux = form.teste.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 100;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 110;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 130;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 120;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 130;
}
tot = prc * qnt;
document.getElementById("total").innerHTML= prc * qnt;
aux = tot;
if(document.form.total.value<0){
document.form.total.value ='';
}
}
function operacao2(){
var tot2 = form.total2.value;
var qnt = form.qnt2.value;
var tp = form.tipo2.value;
var dias = form.dias2.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 10;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 11;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 13;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 12;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 13;
}
tot2 = prc * qnt;
document.getElementById("total2").innerHTML= prc * qnt;
if(document.form.total2.value<0){
document.form.total2.value ='';
}
}
function operacao3(){
var tot3 = form.total3.value;
var qnt = form.qnt3.value;
var tp = form.tipo3.value;
var dias = form.dias3.value;
if ((dias == "0") && (tp == "Adulto")) {
var prc = 0;
}
if ((qnt == "0") && (tp == "Crianca")) {
var prc = 0;
}
if ((dias == "4") && (tp == "Adulto")) {
var prc = 1000;
}
if ((dias == "4") && (tp == "Crianca")) {
var prc = 1100;
}
if ((dias == "5") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "5") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "6") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "6") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "7") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "7") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "8") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "8") && (tp == "Crianca")) {
var prc = 1300;
}
if ((dias == "9") && (tp == "Adulto")) {
var prc = 1200;
}
if ((dias == "9") && (tp == "Crianca")) {
var prc = 1300;
}
tot3 = prc * qnt;
document.getElementById("total3").innerHTML= prc * qnt;
if(document.form.total3.value<0){
document.form.total3.value ='';
}
}
function somatotal(){
var tot3 = form.total3.value;
var tot2 = form.total2.value;
var testez = form.total3.value;
var teste = ((500 + 500) *2)
var total = ((tot3) + (tot2) + (tot));
alert('Total:'+ total);
//document.form.getElementsById("totalx").innerHTNL= tot3 + tot2 + tot;
}
</script>
</head>
<form name="form" >
<fieldset style="width:550px">
<p id="cartao">Dados pessoais</p>
<p>Preencha os campos com o nome completo das pessoas que deseja incluir no transfer</p>
<label for="t1Nome" style="width: 500px"><span>Nome Completo:</span><br/>
<input name="t1Nome" type="text" maxlength="100" style="float:left; width: 90%;" />
</label><br/><br/><br/>
<p id="atracao">Atração 1</p>
<label for="dias" style="width: 120px"><span>Quantos dias?</span><br/>
<select name="dias" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</label>
<label for="tipo" style="width: 150px"><span>Tipo de ingresso</span><br/>
<select name="tipo" size="1" onchange="javascript:operacao()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
</label>
<label for="qnt" style="width: 100px"><span>Quantidade:</span><br/>
<input type='text' name='qnt' onkeyup="javascript:operacao()" style="float:left; width: 70%;" />
</label>
<label style="width: 100px" for="total"><span>Total:</span><br/>
<label name="total" id="total" style="float:left; width: 100%;">
<input name="total" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
<input name="teste" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label><br/><br/><br/><br/>
<p id="atracao">Atração 2</p>
Quantos dias?<br/>
<select name="dias2" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao2()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Tipo de ingresso<br/>
<select name="tipo2" size="1" onchange="javascript:operacao2()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
Quantidade:<br/>
<input type='text' name='qnt2' onkeyup="javascript:operacao2()" style="float:left; width: 70%;" />
<label style="width: 100px" for="total2"><span>Total:</span><br/>
<label name="total2" id="total2" style="float:left; width: 100%;">
<input name="total2" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label><br/><br/><br/><br/><br/>
<p id="atracao">Atração 3</p>
<label for="dias3" style="width: 120px"><span>Quantos dias?</span><br/>
<select name="dias3" style="float:right; width: 80%; margin-right:25px" onchange="javascript:operacao3()" >
<option value="0" selected="selected">0</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</label>
<label for="tipo3" style="width: 150px"><span>Tipo de ingresso</span><br/>
<select name="tipo3" size="1" onchange="javascript:operacao3()" style="float:left; margin-left:0px; width:80%">
<option value="Adulto" selected="selected">Adulto</option>
<option value="Crianca">Criança</option>
</select>
</label>
<label for="qnt3" style="width: 100px"><span>Quantidade:</span><br/>
<input type='text' name='qnt3' onkeyup="javascript:operacao3()" style="float:left; width: 70%;" />
</label>
<label style="width: 100px" for="total3"><span>Total:</span><br/>
<label name="total3" id="total3" style="float:left; width: 100%;">
<input name="total3" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label><br/><br/><br/><br/>
<label style="width: 100px" for="totalx"><span>Total++:</span><br/>
<label name="totalx" id="totalx" style="float:left; width: 100%;">
<input name="totalx" visible="false" style="color:#000000;background-color:#FFFFFF;border: 0px none" />
</label>
</label>
<input type="submit" style="width:90px;height:25px;float:left;margin:0px 10px 0px 150px" onclick="javascript:somatotal()" name="enviar" value="Enviar" />
</fieldset>
</form>
</html>
Vinicius Norberto
Curtidas 0
Respostas
Bruno Betioli
05/10/2012
Adicione as seguintes linhas de código:
Junto com as variáveis tot e lol, fora de qualquer função
Dentro da operação 1:
Dentro da operação 2:
Dentro da operação 3:
Dentro da função de soma:
Diga-nos se deu certo. Pelo menos aqui deu, adicionei apenas isso no seu código. Qualquer coisa grita
Junto com as variáveis tot e lol, fora de qualquer função
var total1; var total2; var total3;
Dentro da operação 1:
tot = prc * qnt; total1 = prc * qnt;
Dentro da operação 2:
tot = prc * qnt; total2 = prc * qnt;
Dentro da operação 3:
tot = prc * qnt; total3 = prc * qnt;
Dentro da função de soma:
var total = ((total3) + (total2) + (total1));
Diga-nos se deu certo. Pelo menos aqui deu, adicionei apenas isso no seu código. Qualquer coisa grita
GOSTEI 0
Vinicius Norberto
05/10/2012
Deu, deu certo sim cara, muito obrigado de verdade.
Só deu um "bug" mas acho que dou conta de arrumar, se algum dos produtos não for for preenchido ele imprime "NaN" no alert.
Mas já ajudou Bruno Betioli obrigado mesmo.
Só deu um "bug" mas acho que dou conta de arrumar, se algum dos produtos não for for preenchido ele imprime "NaN" no alert.
Mas já ajudou Bruno Betioli obrigado mesmo.
GOSTEI 0