entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Haciendo una calculadora en javascript

Hola que tal companeros, tengo un problemita a ver si me pueden ayudar.
Este es el codigo de una calculadora en la que estoy trabajando, el primer paso salio bien, los numeros se muestran en la pantalla cuando les doy click, pero el problema es que cuando le doy click a los numeros no cambios el cero por el numero que pulse, sino que se mueve y el cero siempre esta alli, deberia desaparecer y aparecer el numero en su lugar pero no, alguna idea?
Este es el codigo

var numero = 0;
var numeros = document.querySelectorAll("img");

  for (var i = 0; i < numeros.length; i++) {
    numeros[i].onclick = add;
  }
    function add(e) {
        e.stopPropagation()
        var pantalla = document.getElementById("display");
        var addigit = pantalla;
        numero = e.innerHTML;
        addigit.textContent += this.getAttribute("alt");

    }

Muchas gracias de antemano.

1 Respuesta

3votos

carlossevi Puntos63580

En esta parte del código lo que haces es concatenar el texto existente con el nuevo número pulsado:

addigit.textContent += this.getAttribute("alt");

El comportamiento es el mismo tanto si el contenido anterior es un "0" como cualquier otro, ¿por qué esperas que se comporte distinto?

0voto

africanus1989 comentado

Gracias por contestar. Si el problema es que en lugar de obtener el "+" on tengo "mas" y así con todos. Y no puedo modificar el html

0voto

Leonardo-Tadei comentado

De qué "más" estás hablando? Nada de eso se ve en tu código!

Si el problema es que recibís el string "mas" en vez del signo + para una operación, simplemente poné un if(e == 'mas') y hacé lo que necesites dentro.

Nunca me parece que se pueda aprender a programar con ejemplos... pero en esta charla que dí hace años, llevé como ejemplo una calculadora implementada con 7 líneas de JavaScript. Está todo en un solo archivo (HTML, CSS y JS) para poder ilustrar mejor lo que se decía en la conferencia.

PD: el HTML del que parte todo esto es muy poco cómodo para la tarea... una pena que no lo puedas cambiar.

0voto

africanus1989 comentado

exacto, ese html ha sido el principal dolor de cabeza, creo que lo hacen asi para impedir que nos graduemos xd
La funcion que hice recore todas las imagenes y toma todos los atributos "alt" del archivo, en los numeros esta bien pero en los signos no esta el signo, esta un string y ese es lo que me sale en la pantalla xd

<!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"></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="/" 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="operaciones" 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="=" class="tecla" id="igual"/>
          </div>
          <div class="col2">
            <img src="image/mas.png" alt="mas" class="tecla suma" id="mas"/>
          </div>

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

1voto

Leonardo-Tadei comentado

Pero no es problema que no estén los signos!

Te decía que basta un IF o un SWICHT para que, al recibir el string, lo cambies por el signo...

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta