Ir ao conteúdo
  • Cadastre-se
subzero59

Calculadora com validação javascript

Recommended Posts

Saudações galera !

 

Não estou conseguindo achar o erro no script dessa calculadora, alguem pode me ajudar? o que eu fiz de errado para o programa nao rodar?

 

<html>
	<head>
		<title>Calculadora</title>
		
		<style type="text/css">
			#div1{
				text-align:center;
				border:3px solid black;
				border-radius:3px;
				box-shadow:5px 10px 10px;
				width:25%;
				height:220px;
				position:absolute;
				left:36%;
				background-color:white;
				
			}
			
			body{
				background-color:SlateGray;
				background-image:url("38268813-Mathematics-equations-and-formulas-on-a-white-background-Stock-Photo.jpg")
			}
			
			#valorFinal{
				font-size:20px;
			}
			
			#campo1,#campo2{
				width:40px;
				margin:5px;
				float:center;
			}
			
			#btn1,#btn2, #btn3, #btn4{
				margin:3px;
			}
			
			#result{				
				float:center;				
				
			}
			
			h1{
				font-family:verdana;
								
			}			
			
		</style>
				
		
	</head>
	<body>
		<div id="div1">
		<h1>Calculadora</h1>
				
		<input type="text" id="campo1" />
		<input type="text" id="campo2" /><br />
		
		<input type="button" value="+" id="btn1" onClick="somar()">
		<input type="button" value="-" id="btn2" onClick="subtrair()">
		<input type="button" value="*" id="btn3" onClick="multiplicar()">
		<input type="button" value="/" id="btn4" onClick="dividir()"><br />
		
		<b><label id="result">Resultado: </label></b>
		
		<p id="valorFinal"></p>
		</div>
		
		
		<script language="javascript">
			
			
			var num1 = parseFloat(document.getElementById("campo1").value);
			var num2 = parseFloat(document.getElementById("campo2").value);
			var soma = (num1+num2);
			var subtracao = (num1-num2);
			var multiplicacao = (num1*num2);
			var divisao = (num1/num2);
						
			function somar(){	
				
				if(isNaN(num1) || isNaN(num2)){
					alert("Os campos devem conter apenas numeros");
				}
				else{
					document.getElementById("valorFinal").innerHTML = soma;			
				}
			}
			
			function subtrair(){
				if(isNaN(num1) || isNaN(num2){
					alert("Os campos devem conter apenas numeros");
				}
				else{
					document.getElementById("valorFinal").innerHTML = subtracao;			
				}
			}
			
			function multiplicar(){	
				if(isNaN(num1) || isNaN(num2){
					alert("Os campos devem conter apenas numeros");
				}
				else{
					document.getElementById("valorFinal").innerHTML = multiplicao;			
				}
			}
			
			function dividir(){	
				if(isNaN(num1) || isNaN(num2){
					alert("Os campos devem conter apenas numeros");
				}
				else{
					document.getElementById("valorFinal").innerHTML = divisao;			
				}
			}
		
		</script>
	</body>
</html>

 

 

valeu galera.

Compartilhar este post


Link para o post
Compartilhar em outros sites

As chaves do if estão errada.

Você tá fazendo assim:

if(isNaN(num1) || isNaN(num2){
	alert("Os campos devem conter apenas numeros");
}
else{
	document.getElementById("valorFinal").innerHTML = subtracao;			
}

Quando deve ser assim:

if(isNaN(num1) || isNaN(num2)){
	alert("Os campos devem conter apenas numeros");
}
else{
	document.getElementById("valorFinal").innerHTML = subtracao;			
}

 

Outro erro que pode acontecer, é na hora da divisão, você não está validando se o segundo valor é 0 (não existe divisão por 0).

 

Dica, abra o console do navegador, na maioria dos navegadores é só apertar f12 que vai abrir a ferramenta de desenvolvedor, e depois ir em console.

aaa.JPG

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, mrjhony007 disse:

 

 

valeu pela ajuda, cara !

 

Então, coloquei o parentese ali fechando o if que tinha esquecido, tudo certinho do jeito que voce falou. E agora quando clico no botão, ele manda o alert que deve conter apenas números (como se o value do campo de texto nao tivesse sido convertido pra float), sendo que converti e armazenei na variável num1 e num2.

 

tem ideia do que possa ser ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@subzero59 Eu entendo como funciona a lógica do javascript, mas não sei explicar de maneira técnica, mas vou tentar rsrs.

 

O javascript lê todo o código quando a página é carregada e depois, você manipula variáveis e todo o resto fazendo métodos/funções que funcionam como um "gatilho" e mudaram as variáveis. (Um exemplo é o atributo onClick que executará uma instrução quando o usuário clicar naquele botão).

Resumindo, quando o navegador lê o javascript as suas variáveis são vazias e depois elas não estão sendo mais alterada.

Uma das soluções seria você setar as variáveis dentro das funções.

Ex.:

function dividir(){
	var num1 = parseFloat(document.getElementById("campo1").value);
	var num2 = parseFloat(document.getElementById("campo2").value);
    if(isNaN(num1) || isNaN(num2){
        alert("Os campos devem conter apenas numeros");
    }
    else{
		var divisao = (num1/num2);
        document.getElementById("valorFinal").innerHTML = divisao;
    }
}

Não sei se ficou bem explicado, mas qualquer dúvida. Estamos aí...

Editado por mrjhony007
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@mrjhony007 deu certo cara !!!

Entendi como funciona, é porque to acostumado com o Java e essa logica lá ia funcionar certamente. Agora vou arrumar a validação que você falou da divisão por 0 e implementar uns ícones nos botões pra ficar mais bonito.

 

 

Muito obrigado.

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

×