Javascript Sisteminha em javascript que converte real para outras moedas

subzero59 · 15 de novembro de 2016

Saudações galera !!!

to criando um sistema simples que converte real para outras moedas, porém ele ta retornando o valor apenas do dolar canadense, mesmo selecionado a opção dolar americano ou australiano, ele converte apenas para dolar canadense.

Coloquei apenas essas 3 moedas pra simplificar o exemplo, o resto marquei como comentário... o que vocês acham que posso ta errando no código ?

Segue o código:

<html>
<!--CALCULADORA PARA CONVERTER REAL PARA OUTRAS MOEDAS-->

<head>
	<title>Calculadora para converter moedas</title>
	<style>
		body{
			background-image:url("24272717-Coins-like-Euro-Swiss-Franc-Pound-and-Rubel-forming-a-background-Stock-Photo.jpg");
		}	
	
		#div1{
			border:1px solid black;
			width:45%;
			height:65%;
			background-color:FloralWhite;
			position:absolute;
			left:27%;
			border-radius:5px;
		}
		
		#div2{
			position:relative;
			left:19%;
			top:2.5%;
			font-family:tahoma;
			font-size:15px;
		}
		
		#div3{
			position:relative;
			left:53%;
			top:-6%;
			font-family:tahoma;
			font-size:15px;
		}
		
		#text3{
			font-size:12px;
		}
		
		h1{
			font-family:tahoma;
			font-size:28px;
		}
		
		#btn1{
			position:relative;
			left:32%;
			width:15%;
			height:12%;
			font-family:tahoma;			                
            border-radius:2px;
            background:#1c72dc;
			font-weight:bold;
			
		}
		
		#btn2{
			position:relative;
			left:35%;
			width:15%;
			height:12%;
			font-family:tahoma;			                
            border-radius:2px;
			background:#1c72dc;
			font-weight:bold;			
		}
		
		#btn1:hover, #btn2:hover{
			background:#1c72dc;                              
            border:1px solid black;                
            -moz- box-shadow:0 3px 10px 0 #CCC;
            -webkit- box-shadow:0 3px 10px 0 #ccc;
            text-shadow:0px 0px 5px #fff;
            -webkit - transform: translateX(-10px);
                        
				
		}
		
		#div4{
			position:relative;
			left:-1%;
			top:6%;
			text-align:center;
		}
		
		#resultado{
			font-family:tahoma;
			font-size:15px;
			font-weight:bold;
		}
		
		h1{
			color:Firebrick;
		}
		
		li{
			font-size:12px;
		}
		
		#div5{
			position:relative;
			top:15%;
		}
		
	</style>
</head>
<body>	
	<form>
		<div id="div1">
			<center><h1>Conversão de real para outras moedas</h1></center>
			
			<!--OPÇÕES DE MOEDAS PARA CONVERTER-->
			<div id="div2">
				<b><label id="text1">Converter para: </label></b><br />
				<select id="opções">
					<option></option>
					<option>Dólar Americano</option>
					<option>Dólar Canadense</option>
					<option>Dólar Australiano</option>
					<option>Euro</option>
					<option>Libra Esterlina</option>
					<option>Iene</option>
					<option>Peso Argentino</option>
					<option>Peso Chileno</option>
					<option>Peso Uruguaio</option>
					<option>Bitcoin</option>
					<option>Ouro</option>						
				</select><br />
			</div>
			
			<!--ENTRADA DO VALOR A SER CONVERTIDO-->
			<div id="div3">
				<b><label>Valor a ser convertido:</label></b><br />		
				<input type="text" id="text2" />
			</div>
			
			<!--botões CONVERTER E RESETAR-->
			<input type="button" value="Converter" id="btn1" onClick="conversao()" />
			<input type="reset" value="Limpar" id="btn2">
			
			<!--RESULTADO QUE SERÁ MOSTRADO NA TELA-->
			<div id="div4">
				<label id="resultado">Resultado:</label><br />
				<span id="valorFinal"></span>
			</div><br />
			
			<!--OBSERVAÇÕES-->
			<div id="div5">
				<ul>
				<li>O cálculo efetuado tem caráter informativo e não substitui as disposições da norma cambial brasileira</li>				
				<li>Data da cotação: 15/11/2016</li>
			</ul>
			</div>
		</div>	
	</form>	
	
	<script language="JavaScript">	
		var valor;			
		
		
		function conversao(){
			var dolarAmericano = 3.44;
			var dolarCanadense = 2.44;
			var dolarAustraliano = 2.60;
			/*var euro = 3.70;
			var libra = 4.27;
			var iene = 31.45; //deve-se multiplicar e não dividir
			var pesoArgentino = 0,22;
			var pesoChileno = 194.21; // deve-se multiplicar e não dividir
			var pesoUruguaio = 0.12;
			var bitcoin = 2496.96;
			var ouro = 134.00; //resultado mostrado em gramas*/
			
			valor = parseFloat(document.getElementById("text2").value);			
			
			if(document.getElementById("opções").value="Dólar Americano"){
				document.getElementById("valorFinal").innerHTML = (valor/dolarAmericano).toFixed(2);			
				
			}
			
			if(document.getElementById("opções").value="Dólar Canadense"){
				document.getElementById("valorFinal").innerHTML = (valor/dolarCanada).toFixed(2);			
				
			}
			
			if(document.getElementById("opções").value="Dólar Australiano"){
				document.getElementById("valorFinal").innerHTML = (valor/dolarAustraliano).toFixed(2);			
				
			}
						
		}
		
		
	</script>
</body>
</html>

valeu galera !

JonathanMMachado · 15 de novembro de 2016

Vou dar a resposta, e aproveitar pra dar uma dica.

Primeiro a resposta pro seu problema:

Você ta tentando pegar o value de um tag sem o atributo value. Ou seja, dentro de cada

<option></option>

Deveria ter o atributo "value"

<option value="US$">Dólar Americano</option>
<option value="C$">Dólar Canadense</option>
<option value="A$">Dólar Australiano</option>

E a dica seria, ao invés de você usar esse monte de if, você pode usar um switch case:

var opcao = document.getElementById("opções").value;
switch opcao{
	case "US$":
		document.getElementById("valorFinal").innerHTML = (valor/dolarAmericano).toFixed(2);
		break;
	case "C$":
		document.getElementById("valorFinal").innerHTML = (valor/dolarCanadense).toFixed(2);
		break;
	default:
		document.getElementById("valorFinal").innerHTML = "<h3 style='color: red'>Erro<h3>";
		break;
}

DiF · 15 de novembro de 2016

Eu já mudaria o código para jQuery e usaria a função change() pegando o valor das opções para fazer o switch ou alguns ifs encadeados.

subzero59 · 15 de novembro de 2016

@mrjhony007 Obrigado de novo cara, deu certo !!! valeu pelas dicas.

Sobre o o switch case, eu sempre faço com if por costume mesmo, mas dá no mesmo. Pra mim o código fica mais fácil de entender com if/else.

@DiF tô iniciando no desenvolvimento web, primeiro estou implementando os códigos com JavaScript puro,depois vou fazer os mesmos com Jquery. Ainda não domino muito bem, mas vi que é bem mais simples.

Segue o código rodando pra quem tiver dúvida parecida no futuro:

Spoiler


<html>
<!--CALCULADORA PARA CONVERTER REAL PARA OUTRAS MOEDAS-->

<head>
	<title>Calculadora para converter moedas</title>
	<style>
		body{
			<!--background-image:url("24272717-Coins-like-Euro-Swiss-Franc-Pound-and-Rubel-forming-a-background-Stock-Photo.jpg");-->
			
		}	
	
		#div1{
			border:1px solid black;
			width:45%;
			height:65%;
			background-color:FloralWhite;
			position:absolute;
			left:27%;
			border-radius:5px;
		}
		
		#div2{
			position:relative;
			left:19%;
			top:3.5%;
			font-family:tahoma;
			font-size:15px;
		}
		
		#div3{
			position:relative;
			left:53%;
			top:-6%;
			font-family:tahoma;
			font-size:15px;
		}
		
		#text3{
			font-size:12px;
		}
		
		h1{
			font-family:tahoma;
			font-size:28px;
		}
		
		#btn1{
			position:relative;
			left:32%;
			width:15%;
			height:12%;
			font-family:tahoma;			                
            border-radius:2px;
            background:#1c72dc;
			font-weight:bold;
			
		}
		
		#btn2{
			position:relative;
			left:35%;
			width:15%;
			height:12%;
			font-family:tahoma;			                
            border-radius:2px;
			background:#1c72dc;
			font-weight:bold;			
		}
		
		#btn1:hover, #btn2:hover{
			background:#1c72dc;                              
            border:1px solid black;                
            -moz- box-shadow:0 3px 10px 0 #CCC;
            -webkit- box-shadow:0 3px 10px 0 #ccc;
            text-shadow:0px 0px 5px #fff;
            -webkit - transform: translateX(-10px);
                        
				
		}
		
		#div4{
			position:relative;
			left:-1%;
			top:6%;
			text-align:center;
		}
		
		#resultado{
			font-family:tahoma;
			font-size:15px;
			font-weight:bold;
		}
		
		h1{
			color:Firebrick;
		}
		
		li{
			font-size:12px;
		}
		
		#div5{
			position:relative;
			top:15%;
		}
		
		#valorFinal{
			font-size:20px;
		}
		
	</style>
</head>
<body>	
	<form>
		<div id="div1">
			<center><h1>Conversão de real para outras moedas</h1></center>
			
			<!--OPÇÕES DE MOEDAS PARA CONVERTER-->
			<div id="div2">
				<b><label id="text1">Converter para: </label></b><br />
				<select id="opções">
					<option></option>
					<option value="1">Dólar Americano</option>
					<option value="2">Dólar Canadense</option>
					<option value="3">Dólar Australiano</option>
					<option value="4">Euro</option>
					<option value="5">Libra Esterlina</option>
					<option value="6">Iene</option>
					<option value="7">Peso Argentino</option>
					<option value="8">Peso Chileno</option>
					<option value="9">Peso Uruguaio</option>
					<option value="10">Bitcoin</option>
					<option value="11">Ouro</option>						
				</select><br />
			</div>
			
			<!--ENTRADA DO VALOR A SER CONVERTIDO-->
			<div id="div3">
				<b><label>Valor a ser convertido:</label></b><br />		
				<input type="text" id="text2" />
			</div>
			
			<!--botões CONVERTER E RESETAR-->
			<input type="button" value="Converter" id="btn1" onClick="conversao()" />
			<input type="reset" value="Limpar" id="btn2">
			
			<!--RESULTADO QUE SERÁ MOSTRADO NA TELA-->
			<div id="div4">
				<label id="resultado">Resultado:</label><br />
				<span id="valorFinal"></span>
			</div><br />
			
			<!--OBSERVAÇÕES-->
			<div id="div5">
				<ul>
				<li>O cálculo efetuado tem caráter informativo e não substitui as disposições da norma cambial brasileira</li>				
				<li>Data da cotação: 15/11/2016</li>
			</ul>
			</div>
		</div>	
	</form>	
	
	<script language="JavaScript">	
		var valor;			
		
		
		function conversao(){
			var dolarAmericano = 3.44;
			var dolarCanadense = 2.44;
			var dolarAustraliano = 2.60;
			var euro = 3.70;
			var libra = 4.27;
			var iene = 31.45; //deve-se multiplicar e não dividir
			var pesoArgentino = 0.22;
			var pesoChileno = 194.21; // deve-se multiplicar e não dividir
			var pesoUruguaio = 0.12;
			var bitcoin = 2496.96;
			var ouro = 134.00; //resultado mostrado em gramas
			
			valor = parseFloat(document.getElementById("text2").value);
			var opcao = document.getElementById("opções").value;
				
			
			if(isNaN(valor)){
				alert("Apenas numeros devem ser informados");				
			}	
			
			if(opcao==1){
				document.getElementById("valorFinal").innerHTML = (valor/dolarAmericano).toFixed(2);			
				
			}
			
			if(opcao==2){
				document.getElementById("valorFinal").innerHTML = (valor/dolarCanadense).toFixed(2);			
				
			}
			
			if(opcao==3){
				document.getElementById("valorFinal").innerHTML = (valor/dolarAustraliano).toFixed(2);			
				
			}
			
			if(opcao==4){
				document.getElementById("valorFinal").innerHTML = (valor/euro).toFixed(2);			
				
			}

			if(opcao==5){
				document.getElementById("valorFinal").innerHTML = (valor/libra).toFixed(2);			
				
			}

			if(opcao==6){
				document.getElementById("valorFinal").innerHTML = (valor*iene).toFixed(2);			
				
			}

			if(opcao==7){
				document.getElementById("valorFinal").innerHTML = (valor/pesoArgentino).toFixed(2);			
				
			}

			if(opcao==8){
				document.getElementById("valorFinal").innerHTML = (valor*pesoChileno).toFixed(2);			
				
			}

			if(opcao==9){
				document.getElementById("valorFinal").innerHTML = (valor/pesoUruguaio).toFixed(2);			
				
			}

			if(opcao==10){
				document.getElementById("valorFinal").innerHTML = (valor/bitcoin).toFixed(4);			
				
			}

			if(opcao==11){
				document.getElementById("valorFinal").innerHTML = (valor/ouro).toFixed(2) + "g";			
				
			}
			
					
		}
		
		
	</script>
</body>
</html>

valeu galera!!!

JbRodrigues · 7 de junho de 2019

Eae, tranquilo? sou iniciante em JS e percebi uma coisinha alterando o código. Se você usar dois sinais de igual (==) dentro do IF, ele para de cair só em Dollar Canadense, no entanto, ainda não descobri como arrumar o bug que da quando calcula o Americano e o Canadense como se fossem iguais.

if(document.getElementById("opções").value=="Dólar Americano"){

document.getElementById("valorFinal").innerHTML = (valor/dolarAmericano).toFixed(2);

}

if(document.getElementById("opções").value=="Dólar Canadense"){

document.getElementById("valorFinal").innerHTML = (valor/dolarCanada).toFixed(2);

}

if(document.getElementById("opções").value=="Dólar Australiano"){

document.getElementById("valorFinal").innerHTML = (valor/dolarAustraliano).toFixed(2);

}