Ir ao conteúdo
  • Cadastre-se
Lucas Pelepek

Javascript Calculador usando javascript, Não funciona!

Recommended Posts

<!DOCTYPE html>

<html>

<head>
 <style>
 
 	caixa { 
     
   	 width: 300px;
   	 border: 2px solid black;
   	 padding: 25px;
   	 margin: 25px;
     box-sizing: border-box;
     display: inline-block;
    }
    
    alinhador {
     text-align: center;
   	 margin-right: auto;
   	 margin-left: auto;
    }
    
    entrada[type=number] {
    	width: 100%;
    	padding: 12px 20px;
   	    margin: 8px 0;
    	box-sizing: border-box;
        display: inline-block;
    }
    
    
    
 </style>
</head>

<body>

<alinhador>
 <h1>
 <caixa>calculador</caixa>
 </h1>

	<form> 
 		<input type="number" id="p1" name="p1" />
        
        <select id="operador" name="operador">
        <option 
        value= "+">+</option>
        
        <option
        value="-">-</option>
        
        <option
        value="*">*</option>
        
        <option
        value="/">/</option>
        
        </select>
 		
        <input type="number" id="p2" name="p2">
        
 
      <p id="resultado"></p>
      <button id="button" onclick="mais()">calcular!</button>
 		
	</form>
</alinhador>

<script>



	function mais (){
  var p1 = document.getElementById("p1").value;
 var p2 = document.getElementById("p2").value;

 var resultado1 = document.getElementById("resultado");
 
    resultado1.innerhtml = p1 + p2;
    }
    
</script>

</body>

</html>

bom dia/tarde/noite.
 

sou muito novato em programação web, e estava tentando fazer esse calculador, porém mesmo seguindo os tutoriais ele não calcula! com certeza devo estar fazendo algo errado muito obvio.

só quero que o resultado apareça, o resto do código eu termino depois.

Compartilhar este post


Link para o post
Compartilhar em outros sites

1 - Você usou uma propriedade inexistente "innerhtml", o correto é "innerHTML",

2 - JavaScript é sensível a maiúsculas e minúsculas, quer dizer que innerhtml é diferente de innerHTML.

No seu código na ultima linha da função você escreveu,

resultado1.innerhtml = p1 + p2;

O certo seria a propriedade innerHTML ser usada.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lucas Pelepek Se você digitar "10" + "11", o JavaScript irá concatenar os dois valores e junta-los porque ele tratará eles como sendo strings e não números. Para calcular números, retire as aspas entre eles para o interpretador do JavaScript velo como um valor numérico.

document.write(typeof "1"); // Retorna String.
document.write(typeof 1); // Retorna Number.

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

entendi, mas de que lugar tiro? 
testei em todos relacionados aos 2 números , a unica diferença é que não aparece o resultado mais.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não entendi muito bem a pergunta "mas de que lugar tiro?". O Number não precisa ser chamado nem algo do tipo, apenas lembre-se de que em JavaScript temos diferentes tipos de dados para cada ocasião. Alguns destes são String, Number, Array, Object etc. Portanto quando for fazer uma soma como 10 + 10, use os números sem aspas.

"10" + 10 // Retorna 1010
10 + "10" // Retorna 1010 
10 + 10 + "10" // Retorna 2010
"Teste" + 10 // Retorna Teste10
10 + "Teste" // Retorna 10Teste
10 * "Teste" // Retorna NaN

 

adicionado 9 minutos depois

Nota: No ultimo exemplo acima eu botei números somados juntamente de Strings (cadeias de texto) para demonstrar como o interpretador do JavaScript irá tratar diferentes tipos somados e tentará converter números para strings e vice-versa. Quando ele perceber que ambos os tipos são diferentes ele tentará mudar seu tipo automaticamente usando o método toString() ou toNumber() que estão acoplados no navegador. Caso encontre uma string ex: "Oi" e um número ex: 1,

e tentar multiplica-los, subtrai-los, dividi-los ou modula-los com % ele retornará NaN (Não é um número).

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lucas Pelepek  O seu erro é que sua aplicação está considerando os números como string. Então ele concatena.

O que você deve fazer é converter de string para integer  usando o parseInt()   

 

https://www.w3schools.com/jsref/jsref_parseint.asp

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

É que eu não coloquei aspas nos números na hora da soma, por isso minha pergunta, mas valeu.

adicionado 1 minuto depois

@DiF

<!DOCTYPE html>

<html>

<head>
 <style>

 	caixa {

   	 width: 300px;
   	 border: 2px solid black;
   	 padding: 25px;
   	 margin: 25px;
     box-sizing: border-box;
     display: inline-block;
    }

    alinhador {
     text-align: center;
   	 margin-right: auto;
   	 margin-left: auto;
    }

    entrada[type=number] {
    	width: 100%;
    	padding: 12px 20px;
   	    margin: 8px 0;
    	box-sizing: border-box;
        display: inline-block;
    }



 </style>
</head>

<body>

<alinhador>
 <h1>
 <caixa>calculador</caixa>
 </h1>

	<form>
 		<input type="number" id="p1" name="p1" />

        <select id="operador" name="operador">
        <option
        value= "+">+</option>

        <option
        value="-">-</option>

        <option
        value="*">*</option>

        <option
        value="/">/</option>

        </select>

        <input type="number" id="p2" name="p2">


      <p id="resultado">=</p>
      <button id="button" onclick="mais()">calcular!</button>

	</form>
</alinhador>

<script>



	function mais (){
  var p1 = document.getElementById("p1").value;
 var p2 = document.getElementById("p2").value;

 for (var i = 0; i < tama.length; i++) {
    p1 = parseInt(tama[i]);
    p2 = parseInt(tama[i]);
 }

 var resultado1 = document.getElementById("resultado");

    resultado1.innerHTML = p1 + p2;
    }

</script>

</body>

</html>

valeu, porém mesmo assim não funciona.

alguma ideia?

o resultado não aparece.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lucas Pelepek Não funciona porque o jeito que você fez está errado!

 

Não precisa e nem deve percorrer um vetor se não existe nenhum vetor ali.

Basta fazer desta forma:

function mais (){
  //armazena o valor dos campos nas variáveis
  var p1 = document.getElementById("p1").value;
  var p2 = document.getElementById("p2").value;
  
  //armazena o resultado da operação na variável 
  //Aqui convertemos de string para int
  var resultado = parseInt(p1) + parseInt(p2);

  //armazena o campo do resultado na variável 
  var resultado1 = document.getElementById("resultado");

  //insere o resultado no elemento desejado. 
  resultado1.innerHTML = resultado;
}

Veja funcionando: http://jsfiddle.net/dife/nufd2jrc/3/

 

Porém a função está incompleta. Pois só vai funcionar com a soma.  para funcionar com as demais operações, você precisa pegar o valor do campo select e fazer uma comparação,  Se é "mais" faz uma soma,  se é "menos" faz uma subtração... e por aí vai.

 

Para eliminar o monte de IF , use o bloco de switch case.

 

Outro erro ali é que você "criou " elementos que não existem.

 

caixa, alinhador e entrada são elementos que não existem. Então não use.

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×