Calculator in JavaScript + HTML

Question

Calculator in JavaScript + HTML

Navigation

#1 by (0 votes)

1

I have to make a JavaScript calculator for the class, and I am encountering several errors. I wanted to do the first number 1 and then choose which operation to do, after the chosen operation, enter the second number, and then click the "Send" button that will show the result in alert , but I am to see difficulty in doing the same. Could you help me?

<html>
   <head>
      <title>Aula</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style type="text/css">
      body{
         background: gray url(Image/mosaico.jpg) repeat;
      }
      </style>
      <link href="estilos.css" rel="stylesheet" type="text/css">
      <script>
      //alert("Ola mundo");
      function ola(x){
         var f=document.getElementById("frm");
         var txt = f.txtnome;
         txt.value = "Ola "+txt.value;
      }

      function soma() {
         //alert("1");
         var f=document.getElementById("frm");
         var n1=document.getElementById("n1").value;
         var n2=document.getElementById("n2").value;
         var soma = n1 + n2 ;
         alert(soma);
      }

      function subtracao() {
         var f=document.getElementById("frm");
         var n1=document.getElementById("n1").value;
         var n2=document.getElementById("n2").value;
         var soma = n1 - n2 ;
         alert(soma);
      } 

      function multiplicacao() {
         var f=document.getElementById("frm");
         var n1=document.getElementById("n1").value;
         var n2=document.getElementById("n2").value;
         var soma = n1 * n2 ;
         alert(soma);
      } 

      function divisao() {
         var f=document.getElementById("frm");
         var n1=document.getElementById("n1").value;
         var n2=document.getElementById("n2").value;
         var soma = n1 / n2 ;
         alert(soma);
      } 

      function mostrarresultados() {

      }

      function limpar(){
         //alert("1");
         var f=document.getElementById("frm");
         var n1 = f.n1;
         var n2 = f.n2;

         n1.value = "";
         n2.value = "";
      }
      </script>

   </head>
   <body>
   <form id="frm"  >
      <div id="container">
         <div id="topo"> 
            <h1>Aula de Web</h1>
         </div>

         <div id="menu">
         </div>

         <div id="left">
            <div class="bloco">
               <span>Nome:</span>
               <input type="text" name="txtnome" placeholder="Introduza o seu nome">
               <input id="enviar" type="button" value="Enviar" onClick="ola('Ola')">
            </div>
            <div class="bloco1">
               <span>Introduza os numeros:</span><br>
               <input type="text" size="2" name="n1" placeholder="n1"><br>
               <input type="text" size="2"  name="n2" placeholder="n2"><br><br>
               <input type="button" value="+" onClick="soma()">
               <input type="button" value="-" onClick="subtracao('')">
               <input type="button" value="*" onClick="multiplicacao('')">
               <input type="button" value="/" onClick="divisao('')"><br><br>
               <input type="button" value="Limpar" onClick="limpar()"/>
               <input type="button" value="Enviar" onClick="ola('Ola')">
            </div>
         </div>

         <div id="right">
            <img id="mario1" src="Image/mario1.jpg" alt=""/>
            <img id="mario2" src="Image/mario2.jpg" alt=""/>      
         </div>

         <div id="bottom">

         </div>
      </div>
   </form>
   </body>
</html>

javascript html css

asked by anonymous 19.11.2017 / 21:38

1 answer

Define an abstract attribute in a non-abstract class How to do a return from a Stored Procedure - MySQL

score 0 · Accepted Answer

As your calculator is already mounted and is not functional, I'll suggest these changes to make it work and simplify your code.

1. Create only 1 function to do the calculations, without having to do 1 function for each math operation:

function calc(e){

   var operacao = e.value;

   var n1=parseFloat(document.getElementById("n1").value);
   var n2=parseFloat(document.getElementById("n2").value);

   var calculo = eval(n1+operacao+n2);

   if(!isNaN(calculo)){
      alert(calculo);
   }

}

2. Add onclick to each math operation button by calling the function above:

<input type="button" value="+" onclick="calc(this)">
<input type="button" value="-" onclick="calc(this)">
<input type="button" value="*" onclick="calc(this)">
<input type="button" value="/" onclick="calc(this)">

In the end, your code would look like this:

function calc(e){
   
   var operacao = e.value;
   
   var n1=parseFloat(document.getElementById("n1").value);
   var n2=parseFloat(document.getElementById("n2").value);
   
   var calculo = eval(n1+operacao+n2);

   if(!isNaN(calculo)){
      alert(calculo);
   }
  
}

function ola(x){
   var f=document.getElementById("frm");
   var txt = f.txtnome;
   txt.value = "Ola "+txt.value;
}

function limpar(){
   //alert("1");
   var f=document.getElementById("frm");
   var n1 = f.n1;
   var n2 = f.n2;
   n1.value = "";
   n2.value = "";
}

<form id="frm"  >
   <div id="container">
      <div id="topo"> 
         <h1>Aula de Web</h1>
      </div>
      <div id="menu">
      </div>
      <div id="left">
         <div class="bloco">
            <span>Nome:</span>
            <input type="text" name="txtnome" placeholder="Introduza o seu nome">
            <input id="enviar" type="button" value="Enviar" onClick="ola('Ola')">
         </div>
         <div class="bloco1">
            <span>Introduza os numeros:</span><br>
            <input type="text" size="2" id="n1" placeholder="n1"><br>
            <input type="text" size="2"  id="n2" placeholder="n2"><br><br>
            <input type="button" value="+" onClick="calc(this)">
            <input type="button" value="-" onClick="calc(this)">
            <input type="button" value="*" onClick="calc(this)">
            <input type="button" value="/" onClick="calc(this)">
            <br><br>
            <input type="button" value="Limpar" onClick="limpar()"/>
            <input type="button" value="Enviar" onClick="ola('Ola')">
         </div>
      </div>
      <div id="right">
         <img id="mario1" src="Image/mario1.jpg" alt=""/>
         <img id="mario2" src="Image/mario2.jpg" alt=""/>      
      </div>
      <div id="bottom">
      </div>
   </div>
</form>