1

Estoy intentado crear una calculadora científica en javascript, lo primero que estoy he intentado es hacer que todos los valores a operar se introduzcan en un mismo campo (input,text) y que muestre el resultado al hacer click en un botón, si tengo 2000 ÷ 110 ó 200 x 5 en cualquiera de los dos casos dentro de un mismo input, he intentado que de alguna manera se ejecuten las operaciones y me regrese un resultado (estoy consciente que con una función EVAL las operaciones anteriores de esta forma 2000 / 110 ó 200 * 5, se ejecutarían pero no quiero hacerlo de esa forma). Cualquier ayuda es bienvenida.

Este es el código que se tiene hasta ahora.

        * {
            margin: 0;
            padding: 0;
        }
    
    
    
    
        .button1 {
            background-color: #f1f1f1;
            padding: 21px 34px;
            text-align: center;
        }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="main.js"></script>
    </head>
    
    <body>
        <form name="calculat">
        <div style="padding-left: 10px;">
            <divstyle="padding-top:5px;padding-left: 10px;">
            <input type="text" class="numbers" name="numbers1" style="width: 325px;text-align: right;"></input>
            </div>
            <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="7" onclick="numbers1.value += '7'"></input>
            <input type="button" class="button1" value="8" onclick="numbers1.value += '8'"></input>
            <input type="button" class="button1" value="9" onclick="numbers1.value += '9'"></input>
            <input type="button" class="button1" value="÷" onclick="numbers1.value += '÷'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="4" onclick="numbers1.value += '4'"></input>
            <input type="button" class="button1" value="5" onclick="numbers1.value += '5'"></input>
            <input type="button" class="button1" value="6" onclick="numbers1.value += '6'"></input>
            <input type="button" class="button1" value="x" onclick="numbers1.value += 'x'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="1" onclick="numbers1.value += '1'"/>
            <input type="button" class="button1" value="2" onclick="numbers1.value += '2'"></input>
            <input type="button" class="button1" value="3" onclick="numbers1.value += '3'"></input>
            <input type="button" class="button1" value="-" onclick="numbers1.value += '-'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="0" onclick="numbers1.value += '0'"></input>
            <input type="button" class="button1" value="." style="font-size:15px;" onclick="numbers1.value += '.'"></input>
            <input type="button" class="button1" value="=" onclick="numbers1.value += '='"></input>
            <input type="button" class="button1" value="+" onclick="numbers1.value += '+'"></input>
            <input type="button" class="button1" value="Del" onclick="numbers1.value = ''"/>
        </div>
    </form>
    </body>
</html>

7
  • 2
    Hola Brandon, te saludo y te doy la bienvenida al sitio!, te invito a realizar el recorrido de bienvenida para conocer el funcionamiento básico del sitio y obtener tu primera medalla! Con respecto a la realización de preguntas que estas sean bien recibidas por la comunidad y obtengas excelentes respuestas, es muy importante leer Cómo preguntar, por lo tanto te sugiero modificar tu pregunta, agregar lo que has realizado, más información, etc, saludos!
    – Jorgesys
    el 16 may. 2018 a las 23:34
  • Hola, podrías utilizar split(), para dividir la cadena por operadores aritméticos, vi que tu calculadora solo tiene "+-*/", vas a incluir otras funciones de calculadora científica (sin, cos, tan, ln, etc) ? el 17 may. 2018 a las 0:00
  • Efectivamente voy a implementar ese tipo de cálculos the-breaker puesto que si son necesarios el 17 may. 2018 a las 0:18
  • @BrandonEfrainLopezRamirez, podría ayudarte con la parte de operadores aritméticos, pero no se me ocurre como seria el funcionamiento de los otros operadores, depende cuales tienes pensado utilizar el 17 may. 2018 a las 0:58
  • 1
    edita la pregunta para incluir el código en ella, por favor
    – fedorqui
    el 17 may. 2018 a las 10:48

1 respuesta 1

3

Este código genera una calculadora con los operadores básicos (+,-,x,÷), podría reducirse utilizando funciones dentro de la función.

function evaluar(){
  cadena=document.getElementById('calc').value;
  
  division=cadena.split('÷');
  // alert(cadena);
  adiv=division[0];
  mult1=adiv.split("x");
  amult=1;
  for(i=0; i<mult1.length; i++){
    
    sumar=mult1[i].split('+');
    
    restar=sumar[0].split('-');
    res1=restar[0];
    // alert(res1);
    for(j=1; j<restar.length; j++){
      res1=res1-restar[j];
    }
    sum1=res1;
    for(j=1; j<sumar.length; j++){
        restar=sumar[j].split('-');
        res1=restar[0];
        for(k=1; k<restar.length; k++){
          res1=res1-restar[k];
        }
      sum1=sum1*1+res1*1;
    }
    amult=amult*sum1;
    // alert(amult);
  }
  // alert(amult);
  adiv=amult;
  for(i=1; i<division.length; i++){
    adivn=division[i];
    multn=adivn.split("x");
    sumar=multn[0].split('+');
    
    restar=sumar[0].split('-');
    res1=restar[0];
    // alert(res1);
    for(j=1; j<restar.length; j++){
      res1=res1-restar[j];
    }
    sumn=res1;
    for(h=1; h<sumar.length; h++){
        restar=sumar[h].split('-');
        res1=restar[0];
        for(k=1; k<restar.length; k++){
          res1=res1-restar[k];
        }
      sumn=sumn+res1*1;
    }
    adiv=adiv/sumn;
    for(j=1; j<multn.length; j++){
      
      sumar=multn[i].split('+');
      restar=sumar[0].split('-');
        res1=restar[0];
        // alert(res1);
        for(k=1; k<restar.length; k++){
          res1=res1-restar[k];
        }
        sumn=res1;
      
      for(h=1; h<sumar.length; h++){
          restar=sumar[h].split('-');
          res1=restar[0];
          for(k=1; k<restar.length; k++){
            res1=res1-restar[k];
          }
        sumn=sumn*1+res1*1;
      }
      adiv=adiv*sumn;
    }
    
  }
  document.getElementById('calc').value=adiv;
}
       {
            margin: 0;
            padding: 0;
        }
    
    
    
    
        .button1 {
            background-color: #f1f1f1;
            padding: 21px 34px;
            text-align: center;
        }
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    </head>
    
    <body>
        <form name="calculat">
        <div style="padding-left: 10px;">
            <divstyle="padding-top:5px;padding-left: 10px;">
            <input type="text" class="numbers" name="numbers1" style="width: 325px;text-align: right;" id="calc"></input>
            </div>
            <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="7" onclick="numbers1.value += '7'"></input>
            <input type="button" class="button1" value="8" onclick="numbers1.value += '8'"></input>
            <input type="button" class="button1" value="9" onclick="numbers1.value += '9'"></input>
            <input type="button" class="button1" value="÷" onclick="numbers1.value += '÷'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="4" onclick="numbers1.value += '4'"></input>
            <input type="button" class="button1" value="5" onclick="numbers1.value += '5'"></input>
            <input type="button" class="button1" value="6" onclick="numbers1.value += '6'"></input>
            <input type="button" class="button1" value="x" onclick="numbers1.value += 'x'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="1" onclick="numbers1.value += '1'"/>
            <input type="button" class="button1" value="2" onclick="numbers1.value += '2'"></input>
            <input type="button" class="button1" value="3" onclick="numbers1.value += '3'"></input>
            <input type="button" class="button1" value="-" onclick="numbers1.value += '-'"></input>
            <input type="button" class="button1" value="^" onclick="numbers1.value += '^'"></input>
        </div>
        <div style="padding-top:5px;padding-left: 10px;">
            <input type="button" class="button1" value="0" onclick="numbers1.value += '0'"></input>
            <input type="button" class="button1" value="." style="font-size:15px;" onclick="numbers1.value += '.'"></input>
            <input type="button" class="button1" value="="  onclick="evaluar()"></input>
            <input type="button" class="button1" value="+" onclick="numbers1.value += '+'"></input>
            <input type="button" class="button1" value="Del" onclick="numbers1.value = ''"/>
        </div>
    </form>
    </body>
</html>

(podría editarlo luego con otras funciones mas)

Espero te sea de ayuda, saludos.

1
  • 1
    Waaaooo amigo enserio que esto me va servir mucho, enserio muchísimas gracias por tu ayuda, ya con esto creo que encuentro una manera de realizarlo, se te agrade, ha sido de mucha ayuda el 17 may. 2018 a las 3:48

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.