Javascript - tentando fazer uma calculadora simples, mas não mostra o resultado

17 de agosto de 2010 2 respostas

rsaforuns 17 de agosto de 2010

Olá,

estou tentando criar uma calculadora simples com javascript mas não estou conseguindo fazer mostrar o resultado.

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Insert title here</title>

		<script type="text/javascript">
			function calculadora() {
			   var n1 = parseFloat(document.form1.n1.value);
			   var n2 = parseFloat(document.form1.n2.value);
			   var op = document.form1.operacao.value;
			   var resultado = 0;
			   if (op == '+') {
			       resultado = n1 + n2;
			   }
			   if (op == '-') {
			       resultado = n1 - n2;
			   }
			   if (op == '*') {
			       resultado = n1 * n2;
			   }
			   if (op == '/') {
			       resultado = n1 / n2;
			   }
			   document.form1.resultado.value=resultado;
			}
		</SCRIPT>

	</head>
	<body>
		<form name="form1">
			Número1: <input name="n1" type="text"><br>
			Número2: <input name="n1" type="text"><br>
			<input type="radio" name="operacao" value="+" Checked="checked"> Adição<br>
			<input type="radio" name="operacao" value="-"> Subtração<br>
			<input type="radio" name="operacao" value="*"> Multiplicação<br>
			<input type="radio" name="operacao" value="/"> Divisão<br>
			Resultado: <input name="resultado" type="text"><br>
			<input type="Button" name="" value="Calcula" onclick="calculadora()">
		</form>
	</body>
</html>

2 Respostas

leandro.costa 17 de ago. de 2010

Olá, rsaforuns,

Primeiro, não acesse os elementos no documento via javascript pelo “name”, utilize o “id” nesta situação.

Existe o método em javascript, chamado “document.getElementById()”, este proporciona selecionar elementos pelo atributo “id” do elemento, respeitando as boas práticas de desenvolvimento, assim funciona em todos os navegadores.

Segundo, neste seu exemplo, nem precisa utilizar um formulário para acesso aos elementos, o formulário neste caso, serviria somente para estar nas conformidades de semântica do html. Você pode estudar mais isto, aqui: http://www.w3schools.com

Refiz seu código de maneira bem simples, utilizei a maneira correta, o único macete ai, é o método “document.getElementsByName()”, para trabalhar com os radio buttons.

Recomendo abaixo:

Veja as facilidades que o jQuery te possibilita no desenvolvimento utilizando javascript.
http://jquery.com/

Se quiser estudar mais sobre javascript intermediário / avançado, recomendo a leitura deste livro: http://www.submarino.com.br/produto/1/21471189/melhor+do+javascript,+o.

Abraço!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
        <title>Calculadora</title>  
  
        <script type="text/javascript">  
            function calculadora() {  
               var n1 = parseFloat(document.getElementById('n1').value);  
               var n2 = parseFloat(document.getElementById('n2').value);  
               var resultado = 0;
               if (document.getElementsByName('operacao')[0].checked) {  
                   resultado = n1 + n2;
               }  
               if (document.getElementsByName('operacao')[1].checked) {  
                   resultado = n1 - n2;  
               }  
               if (document.getElementsByName('operacao')[2].checked) {  
                   resultado = n1 * n2;  
               }  
               if (document.getElementsByName('operacao')[3].checked) {  
                   resultado = n1 / n2;  
               }  
               document.getElementById('resultado').value = resultado;  
            }  
        </script>  
  
    </head>  
    <body>
		<form action="#">
		<p>
			Número1: <input id="n1" type="text"><br>  
			Número2: <input id="n2" type="text">
		</p>
		<p>
			<input type="radio" name="operacao" id="adicao" value="+" checked><label for="adicao">Adição</label><br>  
			<input type="radio" name="operacao" id="subtracao" value="-"> <label for="subtracao">Subtração</label><br>
			<input type="radio" name="operacao" id="multiplicacao" value="*"> <label for="multiplicacao">Multiplicação</label><br>  
			<input type="radio" name="operacao" id="divisao" value="/"> <label for="divisao">Divisão</label><br> 
		</p>
		<p>
			Resultado: <input id="resultado" type="text">
		</p>
		<p>
			<input type="button" value="Calcular" onclick="calculadora()">
		</p>
		</form>
    </body>  
</html>

rsaforuns 17 de ago. de 2010

Valeu pelas dicas.

Vou me aprofundar.

Criado 17 de agosto de 2010

Ultima resposta 17 de ago. de 2010

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados