0

Lo que sucede es que tengo que realizar una calculadora con código Js la estructura en HTML y CSS ya esta lista, pero sucede que tengo que limitar el ingreso de números en el display a 8 dígitos, el proceso para las teclas ya esta listo, pero al accionar una operación como una multiplicación, el resultado excede esa cantidad. Necesito arreglarlo. Agradezco mucho la colaboración.

     var operaciona = 0;
     var operacionb = 0;
     var operacion = "";
     var resultado = 0;
     var isSign = false;




      var display = document.getElementById('display')
      display.innerHTML = '0';



    var resultado = document.getElementById('sign');
    var reset = document.getElementById('on');
    var suma = document.getElementById('mas');
    var resta = document.getElementById('menos');
    var multiplicacion = document.getElementById('por');
    var division = document.getElementById('dividido');
    var igual = document.getElementById('igual');
    var punto = document.getElementById('punto');
    var uno = document.getElementById('1');
    var dos = document.getElementById('2');
    var tres = document.getElementById('3');
    var cuatro = document.getElementById('4');
    var cinco = document.getElementById('5');
    var seis = document.getElementById('6');
    var siete = document.getElementById('7');
    var ocho = document.getElementById('8');
    var nueve = document.getElementById('9');
    var cero = document.getElementById('0');



    uno.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "1"
      }

    }


    dos.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "2"
      }
    }
    tres.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "3"
      }
    }
    cuatro.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "4"
      }
    }
    cinco.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "5"
      }
    }
    seis.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "6"
      }
    }
    siete.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "7"
      }
    }
    ocho.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "8"
      }
    }
    nueve.onclick = function(){
      if(display.innerHTML == "0"){
        display.innerHTML = "";
      }
      if(display.innerHTML.length >= 8){
      }else{
      display.innerHTML += "9"
      }
    }
    cero.onclick = function(){
      display.innerHTML += "0"
    }

    suma.onclick = function(){
      operaciona = display.innerHTML;
      operacion = "+";
      display.innerHTML = "";
    }

    resta.onclick = function(){
      operaciona = display.innerHTML;
      operacion = "-";
      display.innerHTML = "";
    }

    multiplicacion.onclick = function(){
      operaciona = display.innerHTML;
      operacion = "*";
      display.innerHTML = "";
    }

    division.onclick = function(){
      operaciona = display.innerHTML;
      operacion = "/";
      display.innerHTML = "";

    }
    igual.onclick = function(){
        operacionb = display.innerHTML;
        if(operacion == "+"){
        resultado = parseFloat(operaciona) + parseFloat(operacionb);
        }
        if(operacion == "-"){
        resultado = parseFloat(operaciona) - parseFloat(operacionb);
        }
        if(operacion == "*"){
        resultado = parseFloat(operaciona) * parseFloat(operacionb);
        }
        if(operacion == "/"){
        resultado = parseFloat(operaciona) / parseFloat(operacionb);
        }
        if(display.innerHTML.length >= 8){
          resultado 
        }else{
        display.innerHTML = resultado
        }



    }
    on.onclick = function(){
      display.innerHTML = "0"
    }
    sign.onclick = function(){
      isSign = !isSign;
      if(isSign && display.innerHTML!="0"){
        display.innerHTML = "-" + display.innerHTML;
      }else{
        display.innerHTML =
        display.innerHTML.slice(1);
      }
    }
    sign.onclick = function(){
      display.innerHTML = display.innerHTML + ".";
      if(display.innerHTML!="0"){
        display.innerHTML =  display.innerHTML + "." ;
      }else{
        display.innerHTML =
        display.innerHTML.slice(1);
      }
    }
    uno.addEventListener("mousedown",function(){
          uno.setAttribute("style","transform:scale(0.85,0.85)")
      })
      uno.addEventListener("mouseout",function(){
          uno.setAttribute("style","transform:scale(1,1)")
      })
      dos.addEventListener("mousedown",function(){
            dos.setAttribute("style","transform:scale(0.85,0.85)")
        })
        dos.addEventListener("mouseout",function(){
            dos.setAttribute("style","transform:scale(1,1)")
        })
        tres.addEventListener("mousedown",function(){
            tres.setAttribute("style","transform:scale(0.85,0.85)")
        })
        tres.addEventListener("mouseout",function(){
            tres.setAttribute("style","transform:scale(1,1)")
        })
        cuatro.addEventListener("mousedown",function(){
            cuatro.setAttribute("style","transform:scale(0.85,0.85)")
        })
        cuatro.addEventListener("mouseout",function(){
            cuatro.setAttribute("style","transform:scale(1,1)")
        })
        cinco.addEventListener("mousedown",function(){
            cinco.setAttribute("style","transform:scale(0.85,0.85)")
        })
        cinco.addEventListener("mouseout",function(){
            cinco.setAttribute("style","transform:scale(1,1)")
        })
        seis.addEventListener("mousedown",function(){
            seis.setAttribute("style","transform:scale(0.85,0.85)")
        })
        seis.addEventListener("mouseout",function(){
            seis.setAttribute("style","transform:scale(1,1)")
        })
        siete.addEventListener("mousedown",function(){
            siete.setAttribute("style","transform:scale(0.85,0.85)")
        })
        siete.addEventListener("mouseout",function(){
            siete.setAttribute("style","transform:scale(1,1)")
        })
        ocho.addEventListener("mousedown",function(){
            ocho.setAttribute("style","transform:scale(0.85,0.85)")
        })
        ocho.addEventListener("mouseout",function(){
            ocho.setAttribute("style","transform:scale(1,1)")
        })
        nueve.addEventListener("mousedown",function(){
            nueve.setAttribute("style","transform:scale(0.85,0.85)")
        })
        nueve.addEventListener("mouseout",function(){
            nueve.setAttribute("style","transform:scale(1,1)")
        })
        cero.addEventListener("mousedown",function(){
            cero.setAttribute("style","transform:scale(0.85,0.85)")
        })
        cero.addEventListener("mouseout",function(){
            cero.setAttribute("style","transform:scale(1,1)")
        })
        sign.addEventListener("mousedown",function(){
            sign.setAttribute("style","transform:scale(0.85,0.85)")
        })
        sign.addEventListener("mouseout",function(){
            sign.setAttribute("style","transform:scale(1,1)")
        })
        raiz.addEventListener("mousedown",function(){
            raiz.setAttribute("style","transform:scale(0.85,0.85)")
        })
        raiz.addEventListener("mouseout",function(){
            raiz.setAttribute("style","transform:scale(1,1)")
        })
        dividido.addEventListener("mousedown",function(){
            dividido.setAttribute("style","transform:scale(0.85,0.85)")
        })
        dividido.addEventListener("mouseout",function(){
            dividido.setAttribute("style","transform:scale(1,1)")
        })
        por.addEventListener("mousedown",function(){
            por.setAttribute("style","transform:scale(0.85,0.85)")
        })
        por.addEventListener("mouseout",function(){
            por.setAttribute("style","transform:scale(1,1)")
        })
        punto.addEventListener("mousedown",function(){
            punto.setAttribute("style","transform:scale(0.85,0.85)")
        })
        punto.addEventListener("mouseout",function(){
            punto.setAttribute("style","transform:scale(1,1)")
        })
        menos.addEventListener("mousedown",function(){
            menos.setAttribute("style","transform:scale(0.85,0.85)")
        })
        menos.addEventListener("mouseout",function(){
            menos.setAttribute("style","transform:scale(1,1)")
        })
        igual.addEventListener("mousedown",function(){
            igual.setAttribute("style","transform:scale(0.85,0.85)")
        })
        igual.addEventListener("mouseout",function(){
            igual.setAttribute("style","transform:scale(1,1)")
        })
        mas.addEventListener("mousedown",function(){
            mas.setAttribute("style","transform:scale(0.85,0.85)")
        })
        mas.addEventListener("mouseout",function(){
            mas.setAttribute("style","transform:scale(1,1)")
        })
        on.addEventListener("mousedown",function(){
            on.setAttribute("style","transform:scale(0.85,0.85)")
        })
        on.addEventListener("mouseout",function(){
            on.setAttribute("style","transform:scale(1,1)")
        })
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Poppins" 
     rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy" 
     rel="stylesheet">
     <title>Calculadora</title>
     <link rel="stylesheet" href="css/estilos.css">

    </head>
    <body>
      <div class="fondo">
    <div class="titulo-container">
      <h1>¡No pierdas <span>la cuenta!</span></h1>
    </div>

    <div class="notas-container">
      <h2>Tus apuntes...</h2>
      <textarea class="nota-input" placeholder="Escribe aquí..."></textarea>
    </div>

    <div id="calculadoraFondo">
      <div class="pantalla">
        <span id="display">0</span>
      </div>

      <div class="teclado">
        <img src="image/ON.png" alt="On" class="tecla" id="on"/>
        <img src="image/sign.png" alt="signo" class="tecla" id="sign"/>
        <img src="image/raiz.png" alt="raiz" class="tecla" id="raiz"/>
        <img src="image/dividido.png" alt="dividido" class="tecla divide" id="dividido"/>

        <img src="image/7.png" alt="7" class="tecla" id="7"/>
        <img src="image/8.png" alt="8" class="tecla" id="8"/>
        <img src="image/9.png" alt="9" class="tecla" id="9"/>
        <img src="image/por.png" alt="por" class="tecla multiplica" 
          id="por"/>

        <img src="image/4.png" alt="4" class="tecla" id="4"/>
        <img src="image/5.png" alt="5" class="tecla" id="5"/>
        <img src="image/6.png" alt="6" class="tecla" id="6"/>
        <img src="image/menos.png" alt="menos" class="tecla resta" 
          id="menos"/>

        <div class="row">
          <div class="col1">
            <img src="image/1.png" alt="1" class="tecla" id="1"/>
            <img src="image/2.png" alt="2" class="tecla" id="2"/>
            <img src="image/3.png" alt="3" class="tecla" id="3"/>

            <img src="image/0.png" alt="0" class="tecla" id="0"/>
            <img src="image/punto.png" alt="punto" class="tecla" id="punto"/>
            <img src="image/igual.png" alt="igual" class="tecla" id="igual"/>
          </div>
          <div class="col2">
            <img src="image/mas.png" alt="mas" class="tecla suma" id="mas"/>
          </div>

        </div>
      </div>
    </div>



    <div class="container-libreta">
      <div class="libreta">
        <div class="contenido-ingresos">
          <h3>Ingresos</h3>
          <ul>
            <li><span>Salario: </span>$1300.00</li>
            <li><span>Bonificación: </span>$200.00</li>
          </ul>
        </div>
        <div class="contenido-egresos">
          <h3>Egresos</h3>
          <ul>
            <li><span>Renta: </span>$300.00</li>
            <li><span>Alimentos: </span>$250.00</li>
            <li><span>Restaurantes: </span>$120.00</li>
            <li><span>Automóvil: </span>$100.00</li>
          </ul>
        </div>
      </div>
    </div>


     </div>
     <script src="js/app.js"></script>
    </body>
    </html>

0

1 respuesta 1

0

Puedes hacer una if para saber si el número va a exceder 99999999 o va a ser menor de 0.0000001 y en tal caso, lo expresas en forma exponencial con solo 2 decimales,

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the exponential notation of a specified number.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var num = 907098708970987099;
    var n = num.toExponential(2);
    document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>

En este ejemplo, se pasa un número mucho mayor a forma exponencial usando un total de 8 dígitos: uno para el entero, otro para el punto decimal, 2 para 2 decimales y luego e+ para el exponente y dos dígitos para el exponente.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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