Javascript Problemas na criação de um calculadora básica

Luiz_Augusto_Silveira · 6 de dezembro de 2017

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title> Praticando 01 </title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_css\calculadorabasica.css"/>
	<script src="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_js\calculadorabasica.js"></script>
</head>
<body>
	<form id="calculadora">
		
		<div class="organizar2">
		<input type="text" name="n1" id="N1" size="1"/>
		
		<input type="text" name="n2" id="N12" size="1"/>
		<br/>
		<input type="text" name="resultado" id="RES" size="3" placeholder="Resultado"/>
		</div>
		<div class="organizar">
		<a href="" onclick="somar()">+</a>
	<a href="" onclick="">-</a>
	<a href="" onclick="">*</a>
	<a href="" onclick="">/</a>
		
		</div>
		
	</form>
	
	
</body>
</html>

function somar(){	
		
		
		var formulario = document.getElementById("calculadora");
		var n1 = formulario.n1.value;
		var n2 = formulario.n2.value;
		
		
		var resultado = formulario.resultado.value;
		alert(resultado);
		
		var soma = +n1 + +n2;
		
		
		
		document.getElementById("Res").value=soma;
		
}

Estou construindo uma calculadora básica.

Eu crie quatro links para chamar cada função referente ao tipo de operação escolhida pelo usuário.

Eu testei todas as variáveis alertando elas no meu documento e todas estão corretas, mas eu quero colocar o valor do resultado da operação matemática dentro do input maior, mas não estou conseguindo. Alguém poderia me ajudar?

LucasMachadoID · 6 de dezembro de 2017

@Luiz_Augusto_Silveira VocÊ vai ter que maniular isso com CSS, usando width e height

Luiz_Augusto_Silveira · 6 de dezembro de 2017

Como assim? Você quer dizer que não está mostrando o resultado por que a caixa de texto é muito pequena?

adicionado 4 minutos depois

@LucasMachadoID Como assim? Você quer dizer que não está mostrando o resultado por que a caixa de texto é muito pequena?

LucasMachadoID · 6 de dezembro de 2017

@Luiz_Augusto_Silveira

55 minutos atrás, Luiz_Augusto_Silveira disse:

mas eu quero colocar o valor do resultado da operação matemática dentro do input maior

Pareceu que você ja estava conseguindo exibir o resultado e não estava conseguindo ve-lo dentro da input

Luiz_Augusto_Silveira · 6 de dezembro de 2017

@LucasMachadoID Fiz como você falou, mas não mostrou dentro do input maior. Eu consegui pegar o valor do input maior e mostrar pelo alert(), mas ainda não consegui colocar dentro do input maior.

Você teria ideia de qual é o problema?

DiF · 7 de dezembro de 2017

@Luiz_Augusto_Silveira

Na verdade você nem precisa usar o formulário. Basta fazer a sua estrutura do HTML usando o input.

Pela função somar() você pega o valor do campo input pelo getElementById() e insere usando o getElementById também.

PS: você só precisa usar o formulário, quando for passar os valores via GET ou POST para o PHP ou qualquer outra linguagem de programação server-side.

HTML:

<div class="organizar2">
   <input type="text" name="n1" id="N1" size="1"/>
   <input type="text" name="n2" id="N2" size="1"/>
   <input type="text" name="resultado" id="RES" size="3" placeholder="Resultado"/>
</div>
<div class="organizar">
   <a href="#" onclick="somar()">+</a>
   <a href="#" onclick="">-</a>
   <a href="#" onclick="">*</a>
   <a href="#" onclick="">/</a>
</div>

Javascript:

function somar(){		
  //Valor do campo N1
  var n1 = document.getElementById("N1").value;
  //Valor do campo N2
  var n2 = document.getElementById("N2").value;
  //Faz a soma convertendo o texto para inteiro usando o parseInt() 
  var soma = parseInt(n1) + parseInt(n2);
  
    //insere no campo input do resultado o valor da operação 
    document.getElementById('RES').value = soma;
}

Veja funcionando: https://jsfiddle.net/dife/65o5n05n/

Luiz_Augusto_Silveira · 7 de dezembro de 2017

@DiF Muito obrigado pela ajuda eu testei na página que você falou e copiei o código para o meu documento, mas na hora de testar não mostrou dentro do input. Será que pode ser algum problema no meu computador?

DiF · 7 de dezembro de 2017

@Luiz_Augusto_Silveira Não, pode ser problema no seu código. Não tem como ser problema do computador.

Em tempo, não recomendo que você copie e cole pois é 90% de certeza que não vai funcionar. Use ele para entender e você mesmo digita linha por linha.

Talvez por você ter copiado, alguma variável ou alguma outra coisa pode ser diferente resultando no não funcionamento.

O código que eu postei, garanto que funciona 100%. Clique no link e teste.

Luiz_Augusto_Silveira · 8 de dezembro de 2017

@DiF Eu seguia suas dicas e criei minha calculadora básica do zero de novo. Só que eu não criei no meu computador. Eu criei em um site online que suporta html, css e javascript. O código que eu criei funcionou perfeitamente no site, depois passei para o meu computador e incorporei meu arquivo css e js a minha página htm, mas na hora de colocar os valores dentro do input maior, não coloca. O computador emite um erro. Você sabe o que pode ser?

DiF · 8 de dezembro de 2017

@Luiz_Augusto_Silveira

1 hora atrás, Luiz_Augusto_Silveira disse:

incorporei meu arquivo css e js a minha página htm, mas na hora de colocar os valores dentro do input maior, não coloca.

Pode ser que isso seja por que você incorporou assim:

<link rel="stylesheet" href="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_css\calculadorabasica.css"/>
<script src="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_js\calculadorabasica.js"></script>

Experimenta fazer com o caminho relativo.

Para isso, crie uma pasta chamada calculadora.

Aí nela, você coloca seus arquivos html.

Dentro desta pasta você cria mais duas chamada "CSS" e "JS"

Dentro de cada você cola o arquivo de css e de javascript.

Depois você incorpora desta forma:

<link rel="stylesheet" href="css/calculadorabasica.css"/>
<script src="js/calculadorabasica.js"></script>

Entrar

Javascript Problemas na criação de um calculadora básica

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais