Calculadora com validação javascript

subzero59 · 11 de novembro de 2016

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.

JonathanMMachado · 11 de novembro de 2016

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.

subzero59 · 11 de novembro de 2016

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 ?

JonathanMMachado · 11 de novembro de 2016

@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í...

subzero59 · 11 de novembro de 2016

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