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

Front-end
#1

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

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>
#3

Valeu pelas dicas.

Vou me aprofundar.

#4