Ir ao conteúdo
  • Cadastre-se
subzero59

Sisteminha em javascript que converte real para outras moedas

Recommended Posts

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 !

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;
}

 

Editado por mrjhony007
  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×