Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Luiz_Augusto_Silveira

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

Recommended Posts

<!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?5a27f0a389bd2_Capturadetela2017-12-0610_36.35_preview.thumb.png.a7260b286dcc080021269881de11cec8.png

Editado por Luiz_Augusto_Silveira

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • 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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

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

    Editado por DiF

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

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

     

    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






    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

    ×