Calculadora científica con javascript – Realizar cálculos en un solo campo sin EVAL

publicado por: Anonymous

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.

_x000D_

_x000D_

        * {_x000D_
            margin: 0;_x000D_
            padding: 0;_x000D_
        }_x000D_
    _x000D_
    _x000D_
    _x000D_
    _x000D_
        .button1 {_x000D_
            background-color: #f1f1f1;_x000D_
            padding: 21px 34px;_x000D_
            text-align: center;_x000D_
        }

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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

_x000D_

_x000D_

function evaluar(){_x000D_
  cadena=document.getElementById('calc').value;_x000D_
  _x000D_
  division=cadena.split('÷');_x000D_
  // alert(cadena);_x000D_
  adiv=division[0];_x000D_
  mult1=adiv.split("x");_x000D_
  amult=1;_x000D_
  for(i=0; i<mult1.length; i++){_x000D_
    _x000D_
    sumar=mult1[i].split('+');_x000D_
    _x000D_
    restar=sumar[0].split('-');_x000D_
    res1=restar[0];_x000D_
    // alert(res1);_x000D_
    for(j=1; j<restar.length; j++){_x000D_
      res1=res1-restar[j];_x000D_
    }_x000D_
    sum1=res1;_x000D_
    for(j=1; j<sumar.length; j++){_x000D_
        restar=sumar[j].split('-');_x000D_
        res1=restar[0];_x000D_
        for(k=1; k<restar.length; k++){_x000D_
          res1=res1-restar[k];_x000D_
        }_x000D_
      sum1=sum1*1+res1*1;_x000D_
    }_x000D_
    amult=amult*sum1;_x000D_
    // alert(amult);_x000D_
  }_x000D_
  // alert(amult);_x000D_
  adiv=amult;_x000D_
  for(i=1; i<division.length; i++){_x000D_
    adivn=division[i];_x000D_
    multn=adivn.split("x");_x000D_
    sumar=multn[0].split('+');_x000D_
    _x000D_
    restar=sumar[0].split('-');_x000D_
    res1=restar[0];_x000D_
    // alert(res1);_x000D_
    for(j=1; j<restar.length; j++){_x000D_
      res1=res1-restar[j];_x000D_
    }_x000D_
    sumn=res1;_x000D_
    for(h=1; h<sumar.length; h++){_x000D_
        restar=sumar[h].split('-');_x000D_
        res1=restar[0];_x000D_
        for(k=1; k<restar.length; k++){_x000D_
          res1=res1-restar[k];_x000D_
        }_x000D_
      sumn=sumn+res1*1;_x000D_
    }_x000D_
    adiv=adiv/sumn;_x000D_
    for(j=1; j<multn.length; j++){_x000D_
      _x000D_
      sumar=multn[i].split('+');_x000D_
      restar=sumar[0].split('-');_x000D_
        res1=restar[0];_x000D_
        // alert(res1);_x000D_
        for(k=1; k<restar.length; k++){_x000D_
          res1=res1-restar[k];_x000D_
        }_x000D_
        sumn=res1;_x000D_
      _x000D_
      for(h=1; h<sumar.length; h++){_x000D_
          restar=sumar[h].split('-');_x000D_
          res1=restar[0];_x000D_
          for(k=1; k<restar.length; k++){_x000D_
            res1=res1-restar[k];_x000D_
          }_x000D_
        sumn=sumn*1+res1*1;_x000D_
      }_x000D_
      adiv=adiv*sumn;_x000D_
    }_x000D_
    _x000D_
  }_x000D_
  document.getElementById('calc').value=adiv;_x000D_
}

_x000D_

       {_x000D_
            margin: 0;_x000D_
            padding: 0;_x000D_
        }_x000D_
    _x000D_
    _x000D_
    _x000D_
    _x000D_
        .button1 {_x000D_
            background-color: #f1f1f1;_x000D_
            padding: 21px 34px;_x000D_
            text-align: center;_x000D_
        }

_x000D_

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

_x000D_

_x000D_

_x000D_

(podría editarlo luego con otras funciones mas)

Espero te sea de ayuda, saludos.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *